Rounded Corners:
This Bootstrap tutorial contains hundreds of Bootstrap examples.
With our online editor, you can edit the code, and click on a button to view the result.
Click on the "Try it Yourself" button to see how it works.
Test your Bootstrap skills at W3Schools!
At W3Schools you will find a complete Bootstrap reference of all CSS classes, Components, and JavaScript plugins - all with "Try it Yourself" examples:
We have made some Bootstrap Templates you can play around with. They are completely free to use:
Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness.
Bootstrap 4 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 9 and down is not supported.
If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it.
W3.CSS is an alternative to Bootstrap.
W3.CSS is smaller, faster, and easier to use.
If you want to learn W3.CSS, go to our W3.CSS Tutorial.
What is Responsive Web Design?
Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.
In June 2014 Bootstrap was the No.1 project on GitHub!
Advantages of Bootstrap:
There are two ways to start using Bootstrap on your own web site.
You can:
If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the instructions there.
If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:
One advantage of using the Bootstrap CDN:
Many users already have downloaded
Bootstrap from MaxCDN when visiting
another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.
Also, most CDN's will make sure that once a user requests a file from it, it will be served
from the server closest to them, which also leads to faster loading time.
jQuery
Bootstrap uses jQuery for JavaScript plugins (like modals, tooltips, etc). However, if you just use the
CSS part of Bootstrap, you don't need jQuery.
1. Add the HTML5 doctype
Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.
Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set:
2. Bootstrap 3 is mobile-first
Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.
To ensure proper rendering and touch zooming, add the following <meta> tag inside the
<head> element:
The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded
by the browser.
3. Containers
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:
.container class provides a responsive fixed width container.container-fluid class provides a full width container, spanning the entire width of the viewportThe following example shows the code for a basic Bootstrap page (with a responsive fixed width container):
The following example shows the code for a basic Bootstrap page (with a full width container):
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
The Bootstrap grid system has four classes:
xs (for phones - screens less than 768px wide)sm (for tablets - screens equal to or greater than 768px wide)md (for small laptops - screens equal to or greater than 992px wide)lg (for laptops and desktops - screens equal to or greater than 1200px wide)The classes above can be combined to create more dynamic and flexible layouts.
The following is a basic structure of a Bootstrap grid:
First; create a row (<div
class="row">). Then, add the desired number of columns (tags with appropriate
.col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
Below we have collected some examples of basic Bootstrap grid layouts.
The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones or screens that are less than 768px wide, the columns will automatically stack:
The following example shows how to get two various-width columns starting at tablets and scaling to large desktops:
Tip: You will learn more about Bootstrap grids later in this tutorial.
Bootstrap's global default font-size is 14px, with a line-height of 1.428.
This is applied to the <body> element and all paragraphs
(<p>).
In addition, all <p> elements have a bottom margin that equals half
their computed line-height (10px by default).
In this chapter, we will look at some HTML elements that will be styled a little bit differently by Bootstrap than browser defaults.
By default, Bootstrap will style the HTML headings (<h1> to
<h6>) in the following way:
In Bootstrap the HTML <small> element is used to create a lighter, secondary text in any heading:
Bootstrap will style the HTML <mark> element in the following way:
Bootstrap will style the HTML <abbr> element in the following way:
Bootstrap will style the HTML <blockquote> element in the following way:
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
To show the quote on the right, use the .blockquote-reverse class:
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Bootstrap will style the HTML <dl> element in the following way:
Bootstrap will style the HTML <code> element in the following way:
The following HTML elements: span, section, and div defines a section in a document.
Bootstrap will style the HTML <kbd> element in the following way:
Bootstrap will style the HTML <pre> element in the following way:
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
Bootstrap also has some contextual classes that can be used to provide "meaning through colors".
The classes for text colors are:.text-muted,
.text-primary, .text-success, .text-info,
.text-warning, and .text-danger:
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
The classes for background colors are:.bg-primary,
.bg-success, .bg-info, .bg-warning, and .bg-danger:
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
The Bootstrap classes below can be added to style HTML elements further:
| Class | Description | Example |
|---|---|---|
.lead |
Makes a paragraph stand out | Try it |
.small |
Indicates smaller text (set to 85% of the size of the parent) | Try it |
.text-left |
Indicates left-aligned text | Try it |
.text-center |
Indicates center-aligned text | Try it |
.text-right |
Indicates right-aligned text | Try it |
.text-justify |
Indicates justified text | Try it |
.text-nowrap |
Indicates no wrap text | Try it |
.text-lowercase |
Indicates lowercased text | Try it |
.text-uppercase |
Indicates uppercased text | Try it |
.text-capitalize |
Indicates capitalized text | Try it |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
Try it |
.list-unstyled |
Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) |
Try it |
.list-inline |
Places all list items on a single line | Try it |
.dl-horizontal |
Lines up the terms (<dt>) and descriptions (<dd>) in
<dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side |
Try it |
.pre-scrollable |
Makes a <pre> element scrollable |
Try it |
For a complete reference of all typography elements/classes, go to our complete Bootstrap Typography Reference.
Also look at our Bootstrap Helper Classes Reference for more information about contextual classes.
A basic Bootstrap table has a light padding and only horizontal dividers.
The .table class adds basic styling to a table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
The .table-striped class adds zebra-stripes to a table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
The .table-bordered class adds borders on all sides of the table and cells:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
The .table-hover class adds a hover effect (grey background color) on table rows:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
The .table-condensed class makes a table more compact by cutting cell padding in half:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Contextual classes can be used to color table rows (<tr>) or table cells (<td>):
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | def@somemail.com |
| Success | Doe | john@example.com |
| Danger | Moe | mary@example.com |
| Info | Dooley | july@example.com |
| Warning | Refs | bo@example.com |
| Active | Activeson | act@example.com |
The contextual classes that can be used are:
| Class | Description |
|---|---|
.active |
Applies the hover color to the table row or table cell |
.success |
Indicates a successful or positive action |
.info |
Indicates a neutral informative change or action |
.warning |
Indicates a warning that might need attention |
.danger |
Indicates a dangerous or potentially negative action |
The .table-responsive class creates a responsive table. The table will then
scroll horizontally on small devices (under 768px). When viewing on anything
larger than 768px wide, there is no difference:
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 » Exercise 6 »
For a complete reference of all table classes, go to our complete Bootstrap Tables Reference.
Rounded Corners:
Circle:
Thumbnail:
The .img-rounded class adds rounded corners to an image (IE8 does
not support rounded corners):
The .img-circle class shapes the image to a circle (IE8 does not
support rounded corners):
The .img-thumbnail class shapes the image to a thumbnail:
Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.
Create responsive images by adding an .img-responsive class
to the <img> tag. The image will then scale nicely to the parent element.
The .img-responsive class applies display: block; and max-width: 100%; and
height: auto; to the image:
You can also use Bootstrap's grid system in conjunction with the .thumbnail class
to create an image gallery.
Note: You will learn more about the Grid System later in this tutorial (how to create a layout with different amount of columns).
Also let videos or slideshows scale properly on any device.
Classes can be applied directly to <iframe>, <embed>, <video>, and <object> elements.
The following example creates a responsive video by adding an .embed-responsive-item class
to an <iframe> tag (the video will then scale nicely to the parent element).
The containing <div> defines the aspect ratio of the video:
What is aspect ratio?
The aspect ratio of an image
describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3
(the universal video format of the 20th
century), and 16:9 (universal for HD television and European digital
television).
You can choose between two aspect ratio classes:
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
For a complete reference of all image classes, go to our complete Bootstrap Image Reference.
A jumbotron indicates a big box for calling extra attention to some special content or information.
A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.
Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.
Use a <div> element with class .jumbotron to create a jumbotron:
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.
Place the jumbotron inside the <div class="container"> if you want the jumbotron to
NOT extend to the edge of the screen:
Place the jumbotron outside the <div class="container"> if you want the jumbotron to extend to the screen edges:
A page header is like a section divider.
The .page-header class adds a horizontal line under the heading (+ adds some extra space around the element):
Use a <div> element with class .page-header to create a page header:
The .well class adds a rounded border around an element with a
gray background color and some padding:
Change the size of the well by adding the .well-sm
class for
small wells or .well-lg class for large wells:
By default, wells are medium in size.
Bootstrap provides an easy way to create predefined alert messages:
Alerts are created with the .alert class, followed by one of the
four contextual classes .alert-success, .alert-info, .alert-warning or
.alert-danger:
Add the alert-link class to any links inside the alert box to create "matching colored links":
To close the alert message, add a .alert-dismissible
class to the alert container. Then add class="close" and data-dismiss="alert"
to a link or a button element (when you click on this the alert box will
disappear).
The aria-* attribute and × explanation
To
help improve accessibility for people using screen readers, you should include
the aria-label="close" attribute, when creating a close button.
× (×) is an HTML entity that is the preferred icon for close
buttons, rather than the letter "x".
For a list of all HTML Entities, visit our HTML Entities Reference.
The .fade and .in classes adds a fading effect when
closing the alert message:
Exercise 1 » Exercise 2 » Exercise 3 »
For a complete reference of all alert options, methods and events, go to our Bootstrap JS Alert Reference.
Bootstrap provides different styles of buttons:
To achieve the button styles above, Bootstrap has the following classes:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-linkThe following example shows the code for the different button styles:
The button classes can be used on an <a>, <button>, or
<input> element:
Why do we put a # in the href attribute of the link?
Since
we do not have any page to link it to, and we do not want to get a "404"
message, we put # as the link in our examples. It should be a real URL to a
specific page.
Bootstrap provides four button sizes:
The classes that define the different sizes are:
.btn-lg.btn-md.btn-sm.btn-xsThe following example shows the code for different button sizes:
A block level button spans the entire width of the parent element.
Add class .btn-block to create a block level button:
A button can be set to an active (appear pressed) or a disabled (unclickable) state:
The class .active makes a button appear pressed, and the class
.disabled
makes a button unclickable:
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
For a complete reference of all button classes, go to our complete Bootstrap Button Reference.
Bootstrap allows you to group a series of buttons together (on a single line) in a button group:
Use a <div> element with class .btn-group to create a button group:
Tip: Instead of applying button sizes to every button in a
group, use class .btn-group-lg|sm|xs to size all buttons in the group:
Bootstrap also supports vertical button groups:
Use the class .btn-group-vertical to create a vertical button group:
To span the entire width of the screen, use the .btn-group-justified
class:
Example with <a> elements:
Note: For <button> elements, you must wrap each button in a .btn-group class:
Nest button groups to create dropdown menus:
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.
Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.
Here are some examples of glyphicons:
Envelope glyphicon:
Print glyphicon:
Search glyphicon:
Download glyphicon:
A glyphicon is inserted with the following syntax:
The name part in the syntax above must be replaced with the proper name of the glyphicon.
The following example shows different ways to use glyphicons:
Exercise 1 » Exercise 2 » Exercise 3 »
For a complete reference of all glyphicons, go to our complete Bootstrap Glyphicon Reference.
Badges are numerical indicators of how many items are associated with a link:
News 5The numbers (5, 10, and 2) are the badges.
Use the .badge class within <span> elements to create badges:
Badges can also be used inside other elements, such as buttons:
The following example shows how to add badges to buttons:
Labels are used to provide additional information about something:
Use the .label class, followed by
one of the six contextual classes .label-default, .label-primary, .label-success,
.label-info, .label-warning or .label-danger, within
a <span> element to create
a label:
The following example shows all contextual label classes:
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
A progress bar can be used to show a user how far along he/she is in a process.
Bootstrap provides several types of progress bars.
A default progress bar in Bootstrap looks like this:
To create a default progress bar, add a .progress class to a <div> element:
Note: Progress bars are not supported in Internet Explorer 9 and
earlier (because they use CSS3 transitions and animations to achieve some of
their effects).
Note: To help improve accessibility for
people using screen readers, you should include the aria-* attributes.
A progress bar with a label looks like this:
Remove the .sr-only class from the progress bar to show a visible percentage:
Contextual classes are used to provide "meaning through colors".
The contextual classes that can be used with progress bars are:
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-dangerThe following example shows how to create progress bars with the different contextual classes:
Progress bars can also be striped:
Add class .progress-bar-striped to add stripes to the progress bars:
Add class .active to animate the progress bar:
Progress bars can also be stacked:
Create a stacked progress bar by placing multiple bars into the same <div class="progress">:
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.
A basic pagination in Bootstrap looks like this:
To create a basic pagination, add the .pagination class to an <ul> element:
The active state shows what is the current page:
Add class .active to let the user know which page he/she is on:
A disabled link cannot be clicked:
Add class .disabled if a link for some reason is disabled:
Pagination blocks can also be sized to a larger size or a smaller size:
Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:
Another form for pagination, is breadcrumbs:
The .breadcrumb class indicates the current page's location within a
navigational hierarchy:
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
For a complete reference of all navigation classes, go to our complete Bootstrap Navigation Reference.
Pager is also a form of pagination (as described in the previous chapter).
Pager provides previous and next buttons (links).
To create previous/next buttons, add the .pager class to an <ul> element:
Use the .previous and .next classes to align each
button to the sides of the page:
For a complete reference of all navigation classes, go to our complete Bootstrap Navigation Reference.
The most basic list group is an unordered list with list items:
To create a basic list group, use an <ul> element with class .list-group, and
<li> elements with class .list-group-item:
You can also add badges to a list group. The badges will automatically be positioned on the right:
To create a badge, create a <span> element with class .badge
inside the list item:
The items in a list group can also be hyperlinks. This will add a grey background color on hover:
To create a list group with linked items, use <div> instead of <ul>
and <a> instead of <li>:
Use the .active class to highlight the current item:
The following list group has a disabled item:
To disable an item, add the .disabled class:
Contextual classes can be used to color list items:
The classes for coloring list-items are:
.list-group-item-success, list-group-item-info,
list-group-item-warning, and .list-group-item-danger:
You can add nearly any HTML inside a list group item.
Bootstrap provides the classes .list-group-item-heading and
.list-group-item-text which can be used as follows:
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
A panel in bootstrap is a bordered box with some padding around its content:
Panels are created with the .panel class, and content inside the panel has a
.panel-body class:
The .panel-default class is used to style the color of the
panel. See the last example on this page for more contextual classes.
The .panel-heading class adds a heading to the panel:
The .panel-footer class adds a footer to the panel:
To group many panels together, wrap a <div> with class
.panel-group around them.
The .panel-group class clears the bottom-margin of each panel:
To color the panel, use contextual classes (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger):
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
The .dropdown class indicates a dropdown menu.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and
the
data-toggle="dropdown" attribute.
The .caret class creates a caret arrow icon (), which indicates that the
button is a dropdown.
Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.
The .divider class is used to separate links inside the dropdown menu with a thin horizontal border:
The .dropdown-header class is used to add headers inside the dropdown menu:
Highlight a specific dropdown item with the .active class (adds a blue background color).
To disable an item in the dropdown menu, use the .disabled class (gets a light-grey text color and a "no-parking-sign" icon on hover):
To right-align the dropdown, add the .dropdown-menu-right class to the element
with .dropdown-menu:
If you want the dropdown menu to expand upwards instead of downwards, change
the <div> element with class="dropdown" to "dropup":
To help improve accessibility for people using screen readers, you should
include the following role and aria-* attributes, when creating a dropdown menu:
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
For a complete reference of all dropdown options, methods and events, go to our Bootstrap JS Dropdown Reference.
Collapsibles are useful when you want to hide and show large amount of content:
The .collapse class indicates a collapsible element (a <div> in our example);
this is the content that will be shown or hidden with a click of a button.
To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
Then add the data-target="#id" attribute to
connect the button with the collapsible content (<div id="demo">).
Note: For <a>
elements, you can use the href attribute instead of the data-target
attribute:
By default, the collapsible content is hidden. However, you can add the .in class to show the content by default:
The following example shows a collapsible panel:
The following shows a collapsible panel with a list group inside:
The following example shows a simple accordion by extending the panel component.
Note: Use the data-parent attribute to make
sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.
For a complete reference of all collapse options, methods and events, go to our Bootstrap JS Collapse Reference.
Most web pages have some kind of a menu.
In HTML, a menu is often defined in an unordered list <ul> (and styled
afterwards), like this:
If you want to create a horizontal menu of the list above, add the
.list-inline class to <ul>:
Or you can display the menu above with Bootstraps' Tabs and Pills (see below).
Note: See the last example on this page to find out how to make tabs and pills toggleable/dynamic.
Tabs are created with <ul class="nav nav-tabs">:
Tip: Also mark the current page with <li class="active">.
The following example creates navigation tabs:
Tabs can also hold dropdown menus.
The following example adds a dropdown menu to "Menu 1":
Pills are created with <ul class="nav nav-pills">. Also mark the current page with
<li class="active">:
Pills can also be displayed vertically. Just add the .nav-stacked class:
Text...
Text...
Text...
The following example places the vertical pill menu inside the last column. So, on a large screen the menu will be displayed to the right. But on a small screen, the content will automatically adjust itself into a single-column layout:
Pills can also hold dropdown menus.
The following example adds a dropdown menu to "Menu 1":
To center/justify the tabs and pills, use the .nav-justified class.
Note that on screens that are smaller than 768px, the list items are stacked (content will remain centered):
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
To make the tabs toggleable, add the data-toggle="tab" attribute to each link.
Then add a .tab-pane class with a unique ID for every tab and wrap them inside a
<div> element with class .tab-content.
If you want the tabs to fade in and out when clicking on them, add the
.fade class to .tab-pane:
The same code applies to pills; only change the data-toggle
attribute to data-toggle="pill":
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 » Exercise 6 »
For a complete reference of all navigation classes, go to our complete Bootstrap Navigation Reference.
For a complete reference of all tab options, methods and events, go to our Bootstrap JS Tab Reference.
A navigation bar is a navigation header that is placed at the top of the page:
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with <nav class="navbar navbar-default">.
The following example shows how to add a navigation bar to the top of the page:
Note: All of the examples on this page will show a navigation bar that takes up too much space on small screens (however, the navigation bar will be on one single line on large screens - because Bootstrap is responsive). This problem (with the small screens) will be solved in the last example on this page.
If you don't like the style of the default navigation bar, Bootstrap provides an alternative, black navbar:
Just change the .navbar-default class into .navbar-inverse:
Navigation bars can also hold dropdown menus.
The following example adds a dropdown menu for the "Page 1" button:
The .navbar-right class is used to right-align navigation bar buttons.
In the following example we insert a "Sign Up" button and a "Login" button to the right in the navigation bar. We also add a glyphicon on each of the two new buttons:
To add buttons inside the navbar, add the .navbar-btn class on a Bootstrap
button:
To add form elements inside the navbar, add the .navbar-form class to a form element and add an input(s). Note that we have added a .form-group class to the div container holding the input. This adds proper padding if you have more than one inputs (you will learn more about this in the Forms chapter).
You can also use the .input-group and .input-group-addon classes to attach an icon or help text next to the input field. You will learn more about these classes in the Bootstrap Inputs chapter.
Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding
and text color).
The navigation bar can also be fixed at the top or at the bottom of the page.
A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.
The .navbar-fixed-top class makes the navigation bar fixed at
the top:
The .navbar-fixed-bottom class makes the navigation bar stay at
the bottom:
The navigation bar often takes up too much space on a small screen.
We should hide the navigation bar; and only show it when it is needed.
In the following example the navigation bar is replaced by a button in the top right corner. Only when the button is clicked, the navigation bar will be displayed:
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
Form controls automatically receive some global styling with Bootstrap:
All textual <input>, <textarea>, and
<select> elements
with class .form-control have a width of 100%.
Bootstrap provides three types of form layouts:
Standard rules for all three form layouts:
<div class="form-group"> (needed for optimum spacing).form-control to all textual <input>, <textarea>, and <select> elementsThe following example creates a vertical form with two input fields, one checkbox, and a submit button:
In an inline form, all of the elements are inline, left-aligned, and the labels are alongside.
Note: This only applies to forms within viewports that are at least 768px wide!
Additional rule for an inline form:
.form-inline to the <form> elementThe following example creates an inline form with two input fields, one checkbox, and one submit button:
Tip: If you don't include a label for every input, screen readers will have trouble with your forms.
You can hide the labels for all devices, except screen readers, by using the
.sr-only class:
A horizontal form means that the labels are aligned next to the input field (horizontal) on large and medium screens. On small screens (767px and below), it will transform to a vertical form (labels are placed on top of each input).
Additional rules for a horizontal form:
.form-horizontal to the <form> element.control-label to all <label> elementsTip: Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.
The following example creates a horizontal form with two input fields, one checkbox, and one submit button.
Bootstrap supports the following form controls:
Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
Note: Inputs will NOT be fully styled if their type is not properly declared!
The following example contains two input elements; one of type text and one of type password:
The following example contains a textarea:
Checkboxes are used if you want the user to select any number of options from a list of preset options.
The following example contains three checkboxes. The last option is disabled:
Use the .checkbox-inline class if you want the checkboxes to appear on the
same line:
Radio buttons are used if you want to limit the user to just one selection from a list of preset options.
The following example contains three radio buttons. The last option is disabled:
Use the .radio-inline class if you want the radio buttons to appear on the same line:
Select lists are used if you want to allow the user to pick from multiple options.
The following example contains a dropdown list (select list):
If you need to insert plain text next to a form label within
a horizontal form, use the .form-control-static class on a <p> element:
The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".
The .input-group-addon class attaches an icon or help text next to the input field.
The .input-group-btn attaches a button next to an input. This is often used together with a search bar:
disabled attribute to disable an input fielddisabled attribute to a fieldset to disable all controls withinreadonly attribute to an input to prevent user input.has-warning, .has-error, or .has-success to the parent element.has-feedback class and an icon.sr-only class on non-visible labelsThe following example demonstrates some of the form control states above in a Horizontal form:
And here is an example of some of the form control states in an Inline form:
Set the heights of input elements using classes like .input-lg and .input-sm.
Set the widths of elements using grid column classes like .col-lg-*and .col-sm-*.
The following examples shows input elements with different heights:
You can quickly size labels and form controls within a Horizontal form by
adding .form-group-* to the <div class="form-group"> element:
You can also quickly size all inputs and other elements inside an .input-group with the .input-group-sm or .input-group-lg classes:
The following examples shows input elements with different widths using different
.col-xs-* classes:
Use the .help-block class to add a block level help text in forms:
Bootstrap provides an easy way to align media objects (like images or videos) to the left or to the right of some content. This can be used to display blog comments, tweets and so on:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla vel metus scelerisque ante sollicitudin commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Use a <div> element with the .media class to create a container for
media objects.
Use the .media-left class to align the media
object (image) to the left, or the .media-right class to align it to the right.
Text that should appear next to the image, is placed inside a container with class="media-body".
Additionally, you can use .media-heading for
headings.
The media object can also be top, middle or bottom aligned with the media-top, media-middle or media-bottom class:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Media objects can also be nested (a media object inside a media object):
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).
Tip: Plugins can be included individually (using Bootstrap's individual "carousel.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js").
Note: Carousels are not supported properly in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve the slide effect).
The following example shows how to create a basic carousel:
The outermost <div>:
Carousels require the use of an id (in this case id="myCarousel") for carousel controls to
function properly.
The class="carousel"
specifies that this <div> contains a carousel.
The .slide
class adds a CSS transition and animation effect, which makes the items slide
when showing a new item. Omit this class if you do not want this effect.
The data-ride="carousel"
attribute tells Bootstrap to begin animating the carousel immediately when the page loads.
The "Indicators" part:
The indicators are the little dots at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing).
The indicators are specified in an ordered list with class .carousel-indicators.
The data-target attribute points to the id of the carousel.
The data-slide-to attribute specifies which slide to go to, when clicking on the specific dot.
The "Wrapper for slides" part:
The slides are specified in a <div> with class .carousel-inner.
The content of each slide is defined in a <div> with class .item. This can be text or images.
The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
The "Left and right controls" part:
This code adds "left" and "right" buttons that allows the user to go back and forth between the slides manually.
The data-slide attribute accepts the keywords "prev" or "next", which alters the slide position
relative to its current position.
Add <div class="carousel-caption"> within each <div
class="item"> to create a caption for each slide:
For a complete reference of all carousel options, methods and events, go to our Bootstrap JS Carousel Reference.
The Modal plugin is a dialog box/popup window that is displayed on top of the current page:
Tip: Plugins can be included individually (using Bootstrap's individual "modal.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js").
The following example shows how to create a basic modal:
The "Trigger" part:
To trigger the modal window, you need to use a button or a link.
Then include the two data-* attributes:
data-toggle="modal" opens the modal windowdata-target="#myModal" points to the id of the modalThe "Modal" part:
The parent <div> of the modal must have an ID that is the
same as the value of the data-target attribute used to trigger the modal ("myModal").
The .modal class identifies the content of <div> as a modal and
brings focus to it.
The .fade class adds a transition effect which fades the modal in
and out. Remove this class if you do not want this effect.
The attribute role="dialog" improves accessibility for
people using screen readers.
The .modal-dialog class sets the proper width and margin of the
modal.
The "Modal content" part:
The <div> with class="modal-content"
styles the modal (border, background-color, etc.). Inside this <div>,
add
the modal's
header, body, and footer.
The .modal-header class is used to define the style for the header of the
modal. The <button> inside the header has a data-dismiss="modal" attribute which
closes the modal if you click on it. The .close class styles the close button,
and the .modal-title class styles the header with a proper line-height.
The .modal-body class is used to define the style for the body of
the modal. Add any HTML markup here; paragraphs, images, videos, etc.
The .modal-footer class is used to define the style for the
footer of the modal. Note that this area is right aligned by default.
Change the size of the modal by adding the .modal-sm
class for
small modals or .modal-lg class for large modals.
Add the size class to the <div> element with class .modal-dialog:
By default, modals are medium in size.
For a complete reference of all modal options, methods and events, go to our Bootstrap JS Modal Reference.
The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element:
Tip: Plugins can be included individually (using Bootstrap's individual "tooltip.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js").
To create a tooltip, add the data-toggle="tooltip"
attribute to an element.
Use the title attribute to specify the text that should be
displayed inside the tooltip:
Note: Tooltips must be initialized with jQuery: select the
specified element and call the tooltip() method.
The following code will enable all tooltips in the document:
By default, the tooltip will appear on top of the element.
Use the data-placement attribute to set the position of the
tooltip on top, bottom, left or the right side of the element:
Tip: You can also use the data-placement attribute with a
value of "auto", which will let the browser decide the position of the
tooltip. For example, if the value is "auto left", the tooltip will display on
the left side when possible, otherwise on the right.
For a complete reference of all tooltip options, methods and events, go to our Bootstrap JS Tooltip Reference.
The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.
Tip: Plugins can be included individually (using Bootstrap's individual "popover.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js").
To create a popover, add the data-toggle="popover"
attribute to an element.
Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the
text that should be displayed inside the popover's body:
Note: Popovers must be initialized with jQuery: select the
specified element and call the popover() method.
The following code will enable all popovers in the document:
By default, the popover will appear on the right side of the element.
Use the data-placement attribute to set the position of the
popover on top, bottom, left or the right side of the element:
Tip: You can also use the data-placement attribute with a value of "auto", which will let the browser decide the position of the popover. For example, if the value is "auto left", the popover will display on the left side when possible, otherwise on the right.
By default, the popover is closed when you click on the element
again. However, you can use the data-trigger="focus" attribute which will close
the popover when clicking outside the element:
Tip: If you want the popover to be displayed when you move
the mouse pointer over the element, use the data-trigger attribute with a value of
"hover":
For a complete reference of all popover options, methods and events, go to our Bootstrap JS Popover Reference.
The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.
The following example shows how to create a scrollspy:
Add data-spy="scroll" to the element that should be used as the scrollable
area (often this is the <body> element).
Then add the data-target attribute with a value of the id or the class name
of the navigation bar (.navbar). This is to make sure that the navbar
is connected with the scrollable area.
Note that scrollable elements must match the ID of the links inside the navbar's
list items
(<div id="section1"> matches <a href="#section1">).
The optional data-offset attribute specifies the number of pixels to offset
from top when calculating the position of scroll. This is useful when you feel
that the links inside the navbar changes the active state too soon or too early
when jumping to the scrollable elements. Default is 10 pixels.
Requires relative positioning: The element with data-spy="scroll" requires the CSS position property, with a value of "relative" to work properly.
In this example, we use Bootstrap's vertical navigation pills as menu:
For a complete reference of all scrollspy methods and events, go to our Bootstrap JS Scrollspy Reference.
The Affix plugin allows an element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them "stick" at a specific area while scrolling up and down the page.
The plugin toggles this behavior on and off (changes the value of
CSS position from static to fixed), depending on
scroll position.
Example 1) An affixed navbar:
Example 2) An affixed sidebar:
With Affix, when we scroll up and down the page, the menu is always visible and locked in its position.
The following example shows how to create a horizontal affixed navigation menu:
The following example shows how to create a vertical affixed navigation menu:
Add data-spy="affix" to the element you want affixed.
Optionally, add the data-offset-top|bottom attribute to
calculate the position of the scroll.
The affix plugin toggles between three classes: .affix, .affix-top, and
.affix-bottom. Each class represents a particular state. You must add CSS
properties to handle the actual positions, with the exception of position:fixed
on the .affix class.
.affix-top or .affix-bottom class to indicate the element is in its top-most or bottom-most position. Positioning with CSS is not required at this point..affix-top or .affix-bottom class with the .affix class (sets position:fixed). At this point, you must add the CSS top or bottom property to position the affixed element in the page..affix class with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position:absolute when necessary.In the first example above, the Affix plugin adds the .affix class (position:fixed)
to the <nav> element when we have scrolled 197 pixels from the top. If you open
the example, you will also see that we added the CSS top property with a value of 0
to the .affix class. This is to make sure that the navbar stays at the top of the page at
all time, when we have scrolled 197 pixels from the top.
Using the Affix plugin together with the Scrollspy plugin:
For a complete reference of all affix methods and events, go to our Bootstrap JS Affix Reference.
Bootstrap does not have a component that allows filtering. However, we can use jQuery to filter / search for elements.
Perform a case-insensitive search for items in a table:
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@mail.com |
| July | Dooley | july@greatstuff.com |
| Anja | Ravendale | a_r@test.com |
Example explained: We use jQuery to loop through each table
rows to check if there are any text values that matches the value of the input
field. The toggle method hides the row (display:none) that does not match the
search. We use the toLowerCase() method to convert the text to lower case, which
makes the search case insensitive (allows "john", "John", and even "JOHN" on
search).
Perform a case-insensitive search for items in a list:
Type something in the input field to search the list for items:
Perform a case-insensitive search for items in a dropdown menu:
Open the dropdown menu and type something in the input field to search for dropdown items:
Perform a case-insensitive search for text inside a div element:
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 column individually, you can group the columns together to create wider columns:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
Tip: Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.
The Bootstrap grid system has four classes:
xs (for phones - screens less than 768px wide)sm (for tablets - screens equal to or greater than 768px wide)md (for small laptops - screens equal to or greater than 992px wide)lg (for laptops and desktops - screens equal to or greater than 1200px wide)The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.
Some Bootstrap grid system rules:
.container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.row and .col-sm-4 are available for quickly making grid layouts.rows.col-sm-4The following is a basic structure of a Bootstrap grid:
So, to create the layout you want, create a container (<div
class="container">). Next, create a row (<div
class="row">). Then, add the desired number of columns (tags with appropriate
.col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
The following table summarizes how the Bootstrap grid system works across multiple devices:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
The next chapters shows examples of grid systems for different devices:
We will create a basic grid system that starts out stacked on extra small devices, before becoming horizontal on larger devices.
The following example shows a simple "stacked-to-horizontal" two-column layout, meaning it will result in a 50%/50% split on all screens, except for extra small screens, which it will automatically stack (100%):
Tip: The numbers in the .col-sm-* classes indicates how many columns the
div should
span (out of 12). So, .col-sm-1 spans 1 column, .col-sm-4 spans 4 columns,
.col-sm-6 spans 6 columns, etc.
Note: Make sure that the
sum always adds up to 12!
Tip: You can turn any fixed-width layout into a full-width layout by changing
the .container class to .container-fluid:
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <576px | >=768px | >=992px | >=1200px |
Assume we have a simple layout with two columns. We want the columns to be split 25%/75% for small devices.
Tip: Small devices are defined as having a screen width from 768 pixels to 991 pixels.
For small devices we will use the .col-sm-* classes.
We will add the following classes to our two columns:
Now Bootstrap is going to say "at the small size, look for classes with -sm- in them and use those".
The following example will result in a 25%/75% split on small (and medium and large) devices. On extra small devices, it will automatically stack (100%):
Note: Make sure that the sum always adds up to 12.
For a 33.3%/66.6% split, you would use .col-sm-4 and .col-sm-8:
The next chapter shows how to add a different split percent for medium devices.
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <576px | >=768px | >=992px | >=1200px |
In the previous chapter, we presented a grid example with classes for small devices. We used two divs (columns) and we gave them a 25%/75% split:
But on medium devices the design may be better as a 50%/50% split.
Tip: Medium devices are defined as having a screen width from 992 pixels to 1199 pixels.
For medium devices we will use the .col-md-* classes.
Now we will add the column widths for medium devices:
Now Bootstrap is going to say "at the small size, look at classes with -sm- in them and use those. At the medium size, look at classes with -md- in them and use those".
The following example will result in a 25%/75% split on small devices and a 50%/50% split on medium (and large) devices. On extra small devices, it will automatically stack (100%):
Note: Make sure that the sum always adds up to 12.
In the example below, we only specify the .col-md-6 class (without .col-sm-*). This means that medium
and large devices will split 50%/50% - because the class scales up. However,
for small devices, it will stack vertically (100% width):
The next chapter shows how to add a different split percent for large devices.
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <576px | >=768px | >=992px | >=1200px |
In the previous chapter, we presented a grid example with classes for small and medium devices. We used two divs (columns) and we gave them a 25%/75% split on small devices, and a 50%/50% split on medium devices:
But on large devices the design may be better as a 33%/66% split.
Tip: Large devices are defined as having a screen width from 1200 pixels and above.
For large devices we will use the .col-lg-* classes.
So now we will add the column widths for large devices:
Now Bootstrap is going to say "at the small size, look at classes with -sm- in them and use those. At the medium size, look at classes with -md- in them and use those. At the large size, look at classes with the word -lg- in them and use those".
The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large devices:
Note: Make sure that the sum always adds up to 12.
In the example below, we only specify the .col-lg-6 class (without .col-md-* and/or .col-sm-*). This means that large devices will split 50%/50%. However,
for medium AND small devices, it will stack vertically (100% width):
Below we have collected some examples of basic Bootstrap grid layouts.
The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones, the columns will automatically stack:
The following example shows how to get a three various-width columns starting at tablets and scaling to large desktops:
The following example shows how to get two various-width columns starting at tablets and scaling to large desktops:
The following example shows how to get two columns starting at tablets and scaling to large desktops, with another two columns (equal widths) within the larger column (at mobile phones, these columns and their nested columns will stack):
The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.
Tip: Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.
Clear floats (with the .clearfix class) at specific breakpoints to prevent strange wrapping with uneven
content:
Move columns to the right using .col-md-offset-* classes. These
classes increase the left margin of a column by * columns:
Change the order of the grid columns with .col-md-push-* and
.col-md-pull-* classes:
We have used Bootstrap's grid system to create some responsive HTML templates. They are completely free - Click on "Try It Yourself" to see the code and do whatever you want with it:
Blog:
Try it Yourself »Portfolio:
Try it Yourself »Webpage:
Try it Yourself »Social:
Try it Yourself »Marketing:
Try it Yourself »Marketing 2:
Try it Yourself »Analytics:
Try it Yourself »Online Store:
Try it Yourself »This page will show you how to build a Bootstrap theme from scratch.
We will start with a simple HTML page, and then add more and more components, until we have a fully functional, personal and responsive website.
The result will look like this, and you are free to modify, save, share, use or do whatever you want with it:
We will start with the following HTML page:
Add Bootstrap CDN and a link to jQuery and put HTML elements inside a container:
Result:
1. Add a custom class (.bg-1) to the container to add a background color.
2. Add the .text-center class to center the text inside the
container:
Result:
Shape the image to a circle with the .img-circle class:
Result:
Add more content and put it inside new containers:
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lets make the containers look good by adding some padding:
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Add a button to the mid container:
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
SearchAdd a Search icon on the "Search" button:
Result:
Try it Yourself »Add three columns of equal width inside the third container (.col-sm-4):
Result:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Add the .img-responsive class to all images.
Add display:inline to the first image to force it to be centered
(the .img-responsive class adds display:block
to the image, which makes it jump to the left of the screen).
If you want the image to span the entire width of the screen
when it starts to stack, add width:100% to the image.
When opening the example, remember to resize the screen to see the responsive effect:
Add a standard navigation bar at the top of the page with and make it collapsible on smaller screens:
Result:
Use CSS to customize the navigation bar:
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
Result:
Add a footer and use CSS to style it:
Result:
Personalize your Theme by adding a font that you like. We have used "Montserrat" from Google's Font Library.
Link to the font in the
<head> section:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Then you can use it in the page:
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
We have also created a "helper" margin class to add extra space
where we think it's needed; usually after each <h3> and <img> element.
This page will show you how to build a Bootstrap theme from scratch.
We will start with a simple HTML page, and then add more and more components, until we have a fully functional, personal and responsive website.
The result will look like this, and you are free to modify, save, share, use or do whatever you want with it:
We will start with the following HTML page:
Add Bootstrap CDN and a link to jQuery and put HTML elements inside a
.jumbotron:
Result:
We specialize in blablabla
1. Add an orange background color to the jumbotron.
2. Add the .text-center class to center the text inside the
jumbotron:
Result:
We specialize in blablabla
Add a form with an input field and a button:
Result:
We specialize in blablabla
Add two containers (.container-fluid), and add a custom class to the second container (.bg-grey
- adds a gray background color):
Result:
Lorem ipsum..
VISION: Our vision Lorem ipsum..
Lets make the jumbotron and the containers look good by adding some padding:
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px 50px;
}
</style>
Result:
We specialize in blablabla
Lorem ipsum..
VISION: Our vision Lorem ipsum..
1. Add an icon (or the company's logo) to each container.
2. Separate the icon and the "about text" by creating two columns (.col-sm-8
and .col-sm-4)
3. Add media queries to center the "logo column" on screens smaller than 768 pixels wide.
Result:
Lorem ipsum..
VISION: Our vision Lorem ipsum..
Add a new container, with 2x3 columns of equal width (.col-sm-4):
Result:
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Add a custom class (.logo-small) to each glyphicon in the "Services" container. Use CSS to style them:
/* Add an orange color to all icons and set the font-size */
.logo-small {
color: #f4511e;
font-size: 50px;
}
.logo {
color: #f4511e;
font-size: 200px;
}
Result:
Lorem ipsum..
VISION: Our vision Lorem ipsum..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Create a new full-width container, with three columns of equal width (.col-sm-4):
Inside each column, add an image.
Then, use the .img-thumbnail class to shape the image to a thumbnail.
Normally, you would add the .img-thumbnail class directly to the
<img> element. In this example, we have placed a thumbnail container around the image, so that we can specify an image text as well.
Result:
Paris
Yes, we built Paris
New York
We built New York
San Francisco
Yes, San Fran is ours
Use CSS to style the images. In our example, we have tried to make them look like cards, by removing their border, and set a 100% width on each image.
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
Result:
Paris
Yes, we built Paris
New York
We built New York
San Francisco
Yes, San Fran is ours
Add a carousel:
Result:
Use CSS to style the carousel:
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #f4511e;
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
Result:
Create a full width container, with three columns of equal width (.col-sm-4):
Inside each column, add a panel:
Result:
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Endless Amet
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Endless Amet
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Endless Amet
Use CSS to style the panels:
.panel {
border: 1px solid #f4511e;
border-radius:0;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #f4511e;
background-color: #fff !important;
color: #f4511e;
}
.panel-heading {
color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: #fff !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #f4511e;
color: #fff;
}
Result:
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Endless Amet
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Endless Amet
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Endless Amet
Add a new container with contact information:
Result:
Contact us and we'll get back to you within 24 hours.
Chicago, US
+00 1515151515
myemail@something.com
Add Google Maps (For more information, read our Google Maps Tutorial):
Result:
Try it Yourself »Add a navbar at the top of the page that collapses on smaller screens:
Result:
Try it Yourself »Tip: Right-align the navigation buttons with the navbar-right
class.
Use CSS to customize the navigation bar:
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
Result:
Try it Yourself »Add scrollspy to automatically update navbar links when scrolling:
Add an "Up Arrow" icon to the footer, which will take the user to the top of the page when clicked on:
Result:
Try it Yourself »Use jQuery to add smooth scrolling (when clicking on the links in the navbar):
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
})
</script>
Try it Yourself »
Personalize your Theme by adding a font that you like. We have used "Montserrat" and "Lato" from Google's Font Library.
Link to the font in the
<head> section:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Then you can use them in the page:
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.jumbotron {
font-family: Montserrat, sans-serif;
}
.navbar {
font-family: Montserrat, sans-serif;
}
We have also added some extra style to some elements:
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
Try it Yourself »
We have also created an animation effect which will slide in elements on
scroll. If you want to use it, just add the .slideanim class to the
element you want to slide in, and add the following to your CSS and jQuery (feel
free to modify the duration, opacity, where to start, when to slide in, and so
on):
.slideanim {visibility:hidden;}
.slide {
/* The name of the animation */
animation-name: slide;
-webkit-animation-name: slide;
/* The duration of the animation */
animation-duration: 1s;
-webkit-animation-duration: 1s;
/* Make the element visible */
visibility: visible;
}
/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
Try it Yourself »
This page will show you how to build a Bootstrap theme from scratch.
We will start with a simple HTML page, and then add more and more components, until we have a fully functional, personal and responsive website.
The result will look like this, and you are free to modify, save, share, use or do whatever you want with it:
We will start with the following HTML page:
Add Bootstrap CDN and a link to jQuery and put HTML elements inside a
container
(.container):
Result:
We love music!
We have created a fictional band website. Lorem ipsum..
Add the .text-center class to center the text inside the
container, and use the <em> element to make the "We love music" text italic:
Result:
We love music!
We have created a fictional band website. Lorem ipsum..
Use CSS to make the container look good with padding:
.container {
padding: 80px 120px;
}
Result:
We love music!
We have created a fictional band website. Lorem ipsum..
Create three columns of equal width (.col-sm-4), add text and
images, and put them inside the container:
Result:
We love music!
We have created a fictional band website. Lorem ipsum..
Name
Name
Name
Shape the image to a circle with the .img-circle class.
We have also added some CSS to make the images look good:
Result:
Name
Name
Name
Make the images collapsible; show extra content when you click on each image:
Result (click on the images to see the effect):
Name
Guitarist and Lead Vocalist
Loves long walks on the beach
Member since 1988
Name
Drummer
Loves drummin'
Member since 1988
Name
Bass player
Loves math
Member since 2005
Create a carousel and add it before the container:
Result:
The atmosphere in New York is lorem ipsum.
Thank you, Chicago - A night we won't forget.
Even though the traffic was a mess, we had the best time playing at Venice Beach!
Use CSS to style the carousel:
.carousel-inner img {
-webkit-filter: grayscale(90%);
filter: grayscale(90%); /* make all photos black and white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media (max-width: 600px) {
.carousel-caption {
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}
}
Result:
The atmosphere in New York is lorem ipsum.
Thank you, Chicago - A night we won't forget.
Even though the traffic was a mess, we had the best time playing at Venice Beach!
Add a new container and add a list (.list-group and .list-group-item) inside
of it.
Add a custom class (.bg-1) to the container (black background color) and some
styles to
its children:
Result:
Lorem ipsum we'll play you some music.
Remember to book your tickets!
Add a label (.label) and a badge (.badge) to highlight available tickets/sold out:
Result:
Lorem ipsum we'll play you some music.
Remember to book your tickets!
Inside the Tour container, add three columns of equal width (.col-sm-4):
Inside each column, add an image.
Then, use the .img-thumbnail class to shape the image to a thumbnail.
Normally, you would add the .img-thumbnail class directly to the
<img> element. In this example, we have placed a thumbnail container around the image, so that we can specify an image text as well.
Result:
Paris
Fri. 27 November 2015
New York
Sat. 28 November 2015
San Francisco
Sun. 29 November 2015
Use CSS to style the list and the thumbnail images. In our example, we have removed the rounded borders from the list and we have tried to make the thumbnail images like cards, by removing their border, and set a 100% width on each image.
We have also modified the default styles of Bootstrap's .btn class, to a black button:
/* Remove rounded borders from list */
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* Remove border and add padding to thumbnails */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* Black buttons with extra padding and without rounded borders */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* On hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}
Result:
Paris
Fri. 27 November 2015
New York
Sat. 28 November 2015
San Francisco
Sun. 29 November 2015
First, change all buttons inside the thumbnail from <button class="btn">Buy Tickets</button>
to <button class="btn" data-toggle="modal"
data-target="#myModal" >Buy Tickets</button>. These
buttons are used to open the actual modal.
To create the modal, look at the following code:
Result (click on the "Buy Tickets" button to see the effect):
Create a new container, with two columns of unequal width (.col-md-4 and .col-md-8).
Add informational icons with text inside the first column and form controls in the second:
Result:
We love our fans!
Fan? Drop a note.
Chicago, US
Phone: +00 1515151515
Email: mail@mail.com
Add tabs (.nav nav-tabs) inside the contact container, with
"quotes" from the band members:
Result:
Man, we've been on the road for some time now. Looking forward to lorem ipsum.
Add Google Maps (For more information, read our Google Maps Tutorial).
Use CSS to set the width, height and color of the map:
Result:
Try it Yourself »Add a navbar at the top of the page that collapses on smaller screens:
Result:
Try it Yourself »Tip: Right-align the navigation links with the navbar-right
class.
If you want one of the links in the navbar to behave like a dropdown
menu, use the .dropdown class
Use CSS to customize the navigation bar:
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.9;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
Result:
Try it Yourself »Add scrollspy to automatically update navbar links when scrolling:
1. Create a <footer> element and add some text.
2. Use CSS to style the footer.
3. Add an "Up Arrow" icon, which will take the user to the top of the page when clicked on.
4. Use jQuery to initialize the tooltip plugin:
Result:
Try it Yourself »Use jQuery to add smooth scrolling (when clicking on the links in the navbar):
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
})
</script>
Try it Yourself »
Personalize your Theme by adding a font that you like. We have used "Montserrat" and "Lato" from Google's Font Library.
Link to the font in the
<head> section:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Then you can use them in the page:
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
.navbar {
font-family: Montserrat, sans-serif;
}
We have also added some extra style to some elements:
/* Overwrite default styles of h3 and h4 */
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
}
/* Remove rounded borders on input fields */
.form-control {
border-radius: 0;
}
/* Disable the ability to resize textareas */
textarea {
resize: none;
}
Try it Yourself »
Bootstrap Get Started
Bootstrap Grid Basic
Three equal columns
Two unequal columns
Bootstrap Typography
Headings <h1> to <h6>
The <small> element
The <mark> element
The <abbr> element
The <blockquote> element
Reversed blockquote
The <dl> element
The <code> element
The <kbd> element
The <pre> element
Contextual text colors
Contextual background colors
Bootstrap Tables
Basic table
Striped rows
Bordered table
Hover rows
Condensed table
Contextual classes
Responsive tables
Bootstrap Images
Rounded image
Circle image
Thumbnail image
Responsive images
Image gallery
Responsive embeds
Bootstrap Jumbotron
Jumbotron inside container
Jumbotron outside container
Creating a page header
Bootstrap Wells
Bootstrap Alerts
Alerts
Closing alerts
Animated alerts
Bootstrap Buttons
Button styles
Button tags
Button sizes
Block level buttons
Active/disabled buttons
Bootstrap Button Groups
Button group
Button group sizes
Vertical button group
Justified button group
Justified button group 2
Nesting button groups and dropdown menus
Split buttons
Bootstrap Glyphicons
Bootstrap Badges and Labels
Badges
Badge inside a button
Labels
Contextual labels
Bootstrap Progress Bars
Progress bar
Progress bar with label
Colored progress bar
Striped progress bar
Animated progress bar
Stacked progress bar
Bootstrap Pagination
Pagination
Active pagination link
Disabled pagination link
Pagination sizing
Breadcrumbs
Bootstrap Pager
Bootstrap List Groups
List group
List group with badges
List group with links
Active list item
Disabled list item
Contextual classes
Custom content
Bootstrap Panels
Panels
Panel heading
Panel footer
Panel group
Contextual panel classes
Bootstrap Dropdowns
Dropdown
Dropdown divider
Dropdown header
Disabled dropdown item
Right-aligned dropdown menu
Dropup
Dropdown accessibility
Bootstrap Collapsible
Collapsible button
Collapsible link
Collapsible "in" (show by default)
Collapsible panel
Collapsible list group
Accordion
Bootstrap Tabs and Pills
Inline list
Tabs
Tabs with dropdown menu
Pills
Vertical pills
Vertical pills in a row
Pills with dropdown menu
Centered tabs and pills
Toggleable/dynamic tabs
Toggleable/dynamic pills
Bootstrap Navbar
Navbar
Inverted navbar
Fixed top navbar
Fixed bottom navbar
Navbar with dropdown
Right-aligned navbar
Collapsible navbar
Bootstrap Forms
Vertical form
Inline form
Inline form without labels
Horizontal form
Bootstrap Inputs
Input
Textarea
Checkbox
Inline checkbox
Radio buttons
Inline radio buttons
Select menu
Bootstrap Inputs 2
Static control
Control states
Inline form: control states
Bootstrap Input Sizing
Input sizing
Input sizing horizontal label
Input width (columns)
Input help text
Bootstrap Media Objects
Left and right-aligned media object
Top, middle and bottom-aligned media object
Nested media object
Nested media object II
Bootstrap Carousel
Bootstrap Modal
Bootstrap Tooltip
Bootstrap Popover
Popover
Positioning popovers
Dismissable popover
Hoverable popover
Bootstrap Scrollspy
Horizontal scrollspy
Vertical scrollspy
Bootstrap Affix
Horizontal affix
Vertical affix
Scrollspy and affix (horizontal)
Scrollspy and affix (vertical)
Bootstrap Filters
Filter table
Filter list
Filter dropdown
Filter anything
Bootstrap Grid: Stacked to Horizontal
Stacked to horizontal grid
Stacked to horizontal grid with fluid container
Bootstrap Grid: Small Devices
Bootstrap Grid: Medium Devices
Bootstrap Grid: Large Devices
Bootstrap Grid Examples
Three equal columns
Three unequal columns
Two unequal columns
Two columns with two nested columns
Mixed columns: mobile and desktop
Mixed columns: mobile, tablet and desktop
Clear floats
Offsetting columns
Push and Pull - Change column order
You can test your Bootstrap skills with W3Schools' Quiz.
The test contains 25 questions and there is no time limit.
The test is not official, it's just a nice way to see how much you know, or don't know, about Bootstrap.
You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 25 points.
Good luck!
The perfect solution for professionals who need to balance work, family, and career building.
More than 10 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The Bootstrap Certificate documents your knowledge of the Bootstrap framework.
|
W3Schools offers an Online Certification Program. The perfect solution for busy professionals who need to balance work, family, and career building. More than 15 000 certificates already issued! |
Document Your SkillsKnowledge is power, especially in the current job market. Documentation of your skills enables you to advance your career, or help you to start a new one. Get a CertificateGetting a certificate proves your commitment to upgrade your skills, gives you the credibility needed for more responsibilities, larger projects, and a higher salary. |
|
Complete list of all Bootstrap classes with description and examples:
| Class | Description | Example | Tutorial |
|---|---|---|---|
.active |
Adds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover) |
Try it | Tables |
.active |
Adds a gray background color to the active link in a default navbar. Adds a black background and a white color to the current link inside an inverted navbar. | Try it | Navbar |
.active |
Adds a blue background color to the active list item in a list group | Try it | List Groups |
.active |
Adds a blue background color to simulate a "pressed" button | Try it | Buttons |
.active |
Animates a striped progress bar | Try it | Progress Bars |
.active |
Adds a blue background color to the active dropdown item in a dropdown | Try it | Dropdowns |
.active |
Adds a blue background color to the active pagination link (to highlight the current page) | Try it | Pagination |
.affix |
The Affix plugin allows an element to become affixed (locked/sticky) to an area on the page. It toggles position:fixed on and off |
Try it | Affix |
.alert |
Creates an alert message box | Try it | Alerts |
.alert-danger |
Red alert box. Indicates a dangerous or potentially negative action | Try it | Alerts |
.alert-dismissible |
Together with the .close class, this class is used to
close the alert |
Try it | Alerts |
.alert-info |
Light-blue alert box. Indicates some information | Try it | Alerts |
.alert-link |
Used on links inside alerts to add matching colored links | Try it | Alerts |
.alert-success |
Green alert box. Indicates a successful or positive action | Try it | Alerts |
.alert-warning |
Yellow alert box. Indicates caution should be taken with this action | Try it | Alerts |
.badge |
Creates a circular badge (grey circle - often used as a numerical indicator) | Try it | Badges |
.bg-danger |
Adds a red background color to an element. Represents danger or a negative action | Try it | Helpers |
.bg-info |
Adds a light-blue background color to an element. Represents some information | Try it | Helpers |
.bg-primary |
Adds a blue background color to an element. Represents something important | Try it | Helpers |
.bg-success |
Adds a green background color to an element. Indicates success or a positive action | Try it | Helpers |
.bg-warning |
Adds a yellow background color to an element. Represents a warning or a negative action | Try it | Helpers |
.breadcrumb |
A pagination. Indicates the current page's location within a navigational hierarchy | Try it | Pagination |
.btn |
Creates a basic button (gray background and rounded corners) | Try it | Buttons |
.btn-block |
Creates a block level button that spans the entire width of the parent element | Try it | Buttons |
.btn-danger |
Red button. Indicates danger or a negative action | Try it | Buttons |
.btn-default |
Default button. White background and grey border | Try it | Buttons |
.btn-group |
Groups buttons together on a single line | Try it | Button Groups |
.btn-group-justified |
Makes a group of buttons span the entire width of the screen | Try it | Button Groups |
.btn-group-lg |
Large button group (makes all buttons in a button group larger - increased font-size and padding) | Try it | Button Groups |
.btn-group-sm |
Small button group (makes all buttons in a button group smaller) | Try it | Button Groups |
.btn-group-xs |
Extra small button group (makes all buttons in a button group extra small) | Try it | Button Groups |
.btn-group-vertical |
Makes a button group appear vertically stacked | Try it | Button Groups |
.btn-info |
Light-blue button. Represents information | Try it | Buttons |
.btn-link |
Makes a button look like a link (get button behavior) | Try it | Buttons |
.btn-lg |
Large button | Try it | Buttons |
.btn-primary |
Blue button. | Try it | Buttons |
.btn-sm |
Small button | Try it | Buttons |
.btn-success |
Green button. Indicates success or a positive action | Try it | Buttons |
.btn-warning |
Yellow button. Represents warning or a negative action | Try it | Buttons |
.btn-xs |
Extra small button | Try it | Buttons |
.caption |
Adds a caption text inside a .thumbnail |
Try it | Images |
.caret |
Creates a caret arrow icon , which indicates that the button is a dropdown | Try it | Dropdowns |
.carousel |
Creates a carousel (slideshow) | Try it | Carousel |
.carousel-caption |
Creates a caption text for each slide in the carousel | Try it | Carousel |
.carousel-control |
Container for next and previous links | Try it | Carousel |
.carousel-indicators |
Adds little dots/indicators at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing) | Try it | Carousel |
.carousel-inner |
Container for slide items | Try it | Carousel |
.center-block |
Centers any element (Sets an element to display:block with margin-right:auto and margin-left:auto) |
Try it | Helpers |
.checkbox |
Container for checkboxes | Try it | Inputs |
.checkbox-inline |
Makes multiple checkboxes appear on the same line | Try it | Inputs |
.clearfix |
Clears floats | Try it | Helpers |
.close |
Indicates a close icon | Try it | Helpers |
.col-*-* |
Responsive grid (span 1-12 column). Extra small devices Phones (< 768px), Small devices Tablets (≥768px), Medium devices Desktops (≥992px), Large devices Desktops (≥1200px). Column values can be 1-12. | Try it | Grid |
.col-*-offset-* |
Move columns to the right. These classes increase the left margin of a column by * columns | Try it | Grid |
.col-*-pull-* |
Changes the order of the grid columns | Try it | Grid |
.col-*-push-* |
Changes the order of the grid columns | Try it | Grid |
.collapse |
Indicates collapsible content - which can be hidden or shown on demand | Try it | Collapse |
.collapse in |
Show the collapsible content by default | Try it | Collapse |
.container |
Fixed width container with widths determined by screen sites. Equal margin on the left and right. | Try it | Containers |
.container-fluid |
A container that spans the full width of the screen | Try it | Containers |
.control-label |
Allows a label to be used for form validation | Try it | Forms |
.danger |
Adds a red background to the table row (<tr> or table cell (<td>). Indicates a dangerous or potentially negative action |
Try it | Tables |
.disabled |
Disables a button (adds opacity and a "no-parking-sign" icon on hover) | Try it | Buttons |
.disabled |
Disables a dropdown item (adds a grey text color and a "no-parking-sign" icon on hover) | Try it | Dropdowns |
.disabled |
Disables a pagination link (cannot be clicked - adds a grey text color and a "no-parking-sign" icon on hover) | Try it | Pagination |
.disabled |
Disables a list item in a list group (cannot be clicked - adds a grey background color and a "no-parking-sign" icon on hover) | Try it | List Groups |
.divider |
Used to separate links in the dropdown menu with a thin horizontal border | Try it | Dropdowns |
.dl-horizontal |
Lines up the terms <dt> and descriptions <dd> in <dl> elements side-by-side. Starts off like default
<dl>s, but when the browser window expands, it will line up side-by-side |
Try it | Typography |
.dropdown |
Creates a toggleable menu that allows the user to choose one value from a predefined list | Try it | Dropdowns |
.dropdown-header |
Used to add headers inside the dropdown menu | Try it | Dropdowns |
.dropdown-menu |
Adds the default styles for the dropdown menu container | Try it | Dropdowns |
.dropdown-menu-right |
Right-aligns a dropdown menu | Try it | Dropdowns |
.dropdown-toggle |
Used on the button that should hide and show (toggle) the dropdown menu | Try it | Dropdowns |
.dropup |
Indicates a dropup menu (upwards instead of downwards) | Try it | Dropdowns |
.embed-responsive |
Container for embedded content. Makes videos or slideshows scale properly on any device | Try it | Images |
.embed-responsive-16by9 |
Container for embedded content. Creates an 16:9 aspect ratio embedded content | Try it | Images |
.embed-responsive-4by3 |
Container for embedded content. Creates an 4:3 aspect ratio embedded content | Try it | Images |
.embed-responsive-item |
Used inside .embed-responsive. Scales the video nicely to the parent element |
Try it | Images |
.fade |
Adds a fading effect when closing an alert box | Try it | Alerts |
.form-control |
Used on input, textarea, and select elements to span the entire width of the page and make them responsive | Try it | Forms |
.form-control-feedback |
Form validation class | Try it | Inputs 2 |
.form-control-static |
Adds plain text next to a form label within a horizontal form | Try it | Inputs 2 |
.form-group |
Container for form input and label | Try it | Forms |
.form-inline |
Makes a <form> left-aligned with inline-block controls (This only applies to forms within viewports that are at least 768px wide) | Try it | Forms |
.form-horizontal |
Aligns labels and groups of form controls in a horizontal layout | Try it | Forms |
.glyphicon |
Creates an icon. Bootstrap provides 260 free glyphicons from the Glyphicons Halflings set | Try it | Glyphicons |
.has-danger |
Adds a red color to the label and a red border to the input, as well as an error icon inside the input (used together with .has-feedback) |
Try it | Forms |
.has-feedback |
Adds feedback icons for inputs (checkmark, warning and error signs) | Try it | Forms |
.has-success |
Adds a green color to the label and a green border to the input, as well as a checkmark icon inside the input (used together with .has-feedback) |
Try it | Forms |
.has-warning |
Adds a yellow/orange color to the label and a yellow/orange border to the input, as well as a checkmark icon inside the input (used together with .has-feedback) |
Try it | Forms |
.help-block |
A block of help text that breaks onto a new line and may extend beyond one line. | Try it | Input Sizing |
.hidden |
Forces an element to be hidden (display:none) |
Try it | Helpers |
.hidden-* |
Hides content depending on screen size | Try it | Helpers |
.hide |
Deprecated. Use .hidden instead |
Try it | Helpers |
.h1 - .h6 |
Makes an element look like a heading of the chosen class (h1-h6) | Try it | Typography |
.icon-bar |
Used in the navbar to create a hamburger menu (three horizontal bars) | Try it | Navbar |
.icon-next |
Unicode icon (arrow pointing right), used in carousels. This is often replaced with a glyphicon | Try it | Carousel |
.icon-prev |
Unicode icon (arrow pointing left), used in carousels. This is often replaced with a glyphicon | Try it | Carousel |
.img-circle |
Shapes an image to a circle (not supported in IE8 and earlier) | Try it | Images |
.img-responsive |
Makes an image responsive | Try it | Images |
.img-rounded |
Adds rounded corners to an image | Try it | Images |
.img-thumbnail |
Shapes an image to a thumbnail (borders) | Try it | Images |
.in |
Fades in tabs | Try it | Tabs |
.info |
Adds a light-blue background to the table row (<tr> or table cell (<td>). Indicates a neutral informative change or action |
Try it | Tables |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
Try it | Typography |
.input-group |
Container to enhance an input by adding an icon, text or a button in front or behind it as a "help text" | Try it | Inputs |
.input-group-lg |
Large input group | Try it | Inputs |
.input-group-sm |
Small input group | Try it | Inputs |
.input-group-addon |
Together with the .input-group class, this class makes it possible to add an icon or help text next to the input field |
Try it | Inputs |
.input-group-btn |
Together with the .input-group class, this class attaches a button next to an input. Often used as a search bar |
Try it | Inputs |
.input-lg |
Large input field | Try it | Input Sizing |
.input-sm |
Small input field | Try it | Input Sizing |
.invisible |
Makes an element invisible (visibility:hidden). Note: Even though the element is invisible, it will take up space on the page |
Try it | Helpers |
.item |
Class added to each carousel item. May be text or images | Try it | Carousel |
.jumbotron |
Creates a padded grey box with rounded corners that enlarges the font sizes of the text inside it. Creates a big box for calling extra attention to some special content or information | Try it | Jumbotron |
.label |
Adds a grey rounded box to an element. Provides additional information about something (e.g. "New") | Try it | Labels |
.label-danger |
Red label | Try it | Labels |
.label-info |
Light-blue label | Try it | Labels |
.label-success |
Green label | Try it | Labels |
.label-warning |
Yellow label | Try it | Labels |
.lead |
Increase the font size and line height of a paragraph | Try it | Typography |
.left |
Used to identify the left carousel control | Try it | Carousel |
.list-group |
Creates a bordered list group for <li> elements |
Try it | List Group |
.list-group-item |
Added to each <li> element in the list group |
Try it | List Group |
.list-group-item-heading |
Creates a list group heading (used on other elements besides <li>) |
Try it | List Group |
.list-group-item-text |
Used for item text inside the list group (used on other elements besides
<li>) |
Try it | List Group |
.list-group-item-danger |
Red background color for a list item in a list group | Try it | List Group |
.list-group-item-info |
Light-blue background color for a list item in a list group | Try it | List Group |
.list-group-item-success |
Green background color for a list item in a list group | Try it | List Group |
.list-group-item-warning |
Yellow background color for a list item in a list group | Try it | List Group |
.list-inline |
Places all list items on a single line (horizontal menu) | Try it | Tabs |
.list-unstyled |
Removes all default list-style (bullets, left margin, etc.) styling from a
<ul> or <ol> list |
Try it | Typography |
.mark |
Highlights text: Highlighted text | Try it | Typography |
.media |
Aligns media objects (like images or videos - often used for comments in a blog post etc) | Try it | Media Objects |
.media-body |
Text that should appear next to a media object | Try it | Media Objects |
.media-heading |
Creates a heading inside the media object | Try it | Media Objects |
.media-list |
Nested media lists | Try it | Media Objects |
.media-object |
Indicates a media object (image or video) | Try it | Media Objects |
.modal |
Identifies the content as a modal and brings focus to it | Try it | Modals |
.modal-body |
Defines the style for the body of the modal. Add any HTML markup here (p, img, etc) | Try it | Modals |
.modal-content |
Styles the modal (border, background-color, etc). Inside this, add the modal's header, body and footer, if needed | Try it | Modals |
.modal-dialog |
Sets the proper width and margin of the modal | Try it | Modals |
.modal-footer |
The footer of the modal (often contains an action button and a close button) | Try it | Modals |
.modal-header |
The header of the modal (often contains a title and a close button) | Try it | Modals |
.modal-lg |
Large modal (wider than default) | Try it | Modals |
.modal-open |
Used on the <body> element to prevent page scrolling (overflow:hidden) |
Try it | Modals |
.modal-sm |
Small modal (less width) | Try it | Modals |
.modal-title |
The title of the modal | Try it | Modals |
.nav nav-tabs |
Indicates a tabbed menu | Try it | Tabs |
.nav nav-pills |
Indicates a pill menu | Try it | Tabs |
.nav .navbar-nav |
Used on a <ul> container that contains the list items with links inside a navigation bar |
Try it | Navbar |
.nav-justified |
Centers tabs/pills. Note that on screens smaller than 768px the items are stacked (content will remain centered) | Try it | Tabs |
.nav-stacked |
Vertically stack tabs or pills | Try it | Tabs |
.nav-tabs |
Creates a tabbed menu | Try it | Tabs |
.navbar |
Creates a navigation bar | Try it | Navbar |
.navbar-brand |
Added to a link or a header element inside the navbar to represent a logo or a header | Try it | Navbar |
.navbar-btn |
Vertically aligns a button inside a navbar | Try it | Navbar |
.navbar-collapse |
Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets) | Try it | Navbar |
.navbar-default |
Creates a default navigation bar (light-grey background color) | Try it | Navbar |
.navbar-fixed-bottom |
Makes the navbar stay at the bottom of the screen (sticky/fixed) | Try it | Navbar |
.navbar-fixed-top |
Makes the navbar stay at the top of the screen (sticky/fixed) | Try it | Navbar |
.navbar-form |
Added to form elements inside the navbar to vertically center them (proper padding) | Try it | Navbar |
.navbar-header |
Added to a container element that contains the link/element that represent a logo or a header | Try it | Navbar |
.navbar-inverse |
Creates a black navigation bar (instead of light-grey) | Try it | Navbar |
.navbar-left |
Aligns nav links, forms, buttons, or text, in the navbar to the left | Try it | Navbar |
.navbar-link |
Styles an element to look like a link inside the navbar (anchors get proper padding and an underline on hover, while other elements like p or span gets a default hover effect - white color in an inversed navbar and a black color in a default navbar) | Try it | Navbar |
.navbar-nav |
Used on a <ul> container that contains the list items with links inside a navigation bar |
Try it | Navbar |
.navbar-right |
Aligns nav links, forms, buttons, or text in the navbar to the right. | Try it | Navbar |
.navbar-static-top |
Removes left, top and right borders (rounded corners) from the navbar (default navbar has a gray border and a 4px border-radius by default) | Try it | Navbar |
.navbar-text |
Vertical align any elements inside the navbar that are not links (ensures proper padding) | Try it | Navbar |
.navbar-toggle |
Styles the button that should open the navbar on small screens. Often used together with three .icon-bar classes to indicate a toggleable menu icon (hamburger/bars) |
Try it | Navbar |
.next |
Used in the carousel control to identity the next control | Try it | Carousel |
.next |
Used to align pager buttons to the right side of the page (next button) | Try it | Pager |
.page-header |
Adds a horizontal line under the heading (+ adds some extra space around the element) | Try it | Page Header |
.pager |
Creates previous/next buttons (used on <ul> elements) |
Try it | Pager |
.pagination |
Creates a pagination (Useful when you have a web site with lots of pages. Used on <ul> elements) |
Try it | Pagination |
.pagination-lg |
Large pagination (each pagination link gets a font-size of 18px. Default is 14px) | Try it | Pagination |
.pagination-sm |
Small pagination (each pagination link gets a font-size of 12px. Default is 14px) | Try it | Pagination |
.panel |
Creates a bordered box with some padding around its content | Try it | Panels |
.panel-body |
Container for content inside the panel | Try it | Panels |
.panel-collapse |
Collapsible panel (toggle between hiding and showing panel(s)) | Try it | Collapse |
.panel-danger |
Red panel. Indicates danger | Try it | Panels |
.panel-info |
Light-blue panel. Indicates information | Try it | Panels |
.panel-success |
Green panel. Indicates success | Try it | Panels |
.panel-warning |
Yellow panel. Indicates warning | Try it | Panels |
.panel-footer |
Creates a panel footer (light background color) | Try it | Panels |
.panel-group |
Used to group many panels together. This removes the bottom margin below each panel | Try it | Panels |
.panel-heading |
Creates a panel header (light background color) | Try it | Panels |
.panel-title |
Used inside a .panel-heading to adjust the styling of the text (removes margins and adds a font-size of 16px) |
Try it | Panels |
.popover |
Popup-box that appears when the user clicks on an element | Try it | Popover |
.pre-scrollable |
Makes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollbar) |
Try it | Helpers |
.prev |
Used in carousels to indicate a "previous" link | Try it | Carousel |
.previous |
Used to align pager buttons to the left side of the page (previous button) | Try it | Pager |
.progress |
Container for progress bars | Try it | Progress Bars |
.progress-bar |
Creates a progress bar | Try it | Progress Bars |
.progress-bar-danger |
Red progress bar. Indicates danger | Try it | Progress Bars |
.progress-bar-info |
Light-blue progress bar. Indicates information | Try it | Progress Bars |
.progress-bar-striped |
Creates a striped progress bar | Try it | Progress Bars |
.progress-bar-success |
Green progress bar. Indicates success | Try it | Progress Bars |
.progress-bar-warning |
Yellow progress bar. Indicates warning | Try it | Progress Bars |
.pull-left |
Float an element to the left | Try it | Helpers |
.pull-right |
Float an element to the right | Try it | Helpers |
.right |
Used to identify the right carousel control | Try it | Carousel |
.row |
Container for responsive columns | Try it | Grid |
.show |
Shows an element (display:block) |
Try it | Helpers |
.small |
Creates a lighter, secondary text in any heading | Try it | Typography |
.sr-only |
Hides an element on all devices except for screen readers | Try it | Helpers |
.sr-only-focusable |
Hides an element on all devices except for screen readers | Try it | Helpers |
.success |
Adds a green background color to a table row (<tr> or table cell (<td>). Indicates success or a positive action |
Try it | Tables |
.tab-content |
Used together with .tab-pane to creates toggleable/dynamic tabs/pills |
Try it | Tabs |
.tab-pane |
Used together with .tab-content to creates toggleable/dynamic tabs/pills |
Try it | Tabs |
.table |
Adds basic styling to a table (padding, bottom borders, etc) | Try it | Tables |
.table-bordered |
Adds borders on all sides of the table and cells | Try it | Tables |
.table-condensed |
Makes a table more compact by cutting cell padding in half | Try it | Tables |
.table-hover |
Creates a hoverable table (adds a grey background color on table rows on hover) | Try it | Tables |
.table-responsive |
Makes a table responsive (adds a horizontal scrollbar when needed) | Try it | Tables |
.text-capitalize |
Indicates capitalized text | Try it | Typography |
.text-center |
Center-aligns text | Try it | Typography |
.text-danger |
Red text color. Indicates danger | Try it | Typography |
.text-hide |
Hides text (helps replace an element's text content with a background image) | Try it | Typography |
.text-info |
Light-blue text color. Indicates information | Try it | Typography |
.text-justify |
Indicates justified text | Try it | Typography |
.text-left |
Aligns the text to the left | Try it | Typography |
.text-lowercase |
Changes text to lowercase | Try it | Typography |
.text-muted |
Grey text color | Try it | Typography |
.text-nowrap |
Prevents the text from wrapping | Try it | Typography |
.text-primary |
Blue text color | Try it | Typography |
.text-right |
Aligns text to the right | Try it | Typography |
.text-success |
Green text color. Indicates success | Try it | Typography |
.text-uppercase |
Makes text uppercase | Try it | Typography |
.text-warning |
Yellow/orange text color. Indicates warning | Try it | Typography |
.thumbnail |
Adds a border around an element (often images or videos) to make it look like a thumbnail | Try it | Images |
.tooltip |
Popup-box that appears when the user moves the mouse pointer over an element | Try it | Tooltip |
.visible-* |
Deprecated as of v3.2.0. Used to show and/or hide content by device. Note: Use .hidden-* instead |
Try it | Helpers |
.visible-print-block |
Displays the element (display:block) in print (pre)view |
Helpers | |
.visible-print-inline |
Displays the element (display:inline) in print (pre)view |
Helpers | |
.visible-print-inline-block |
Displays the element (display:inline-block) in print (pre)view |
Helpers | |
.hidden-print |
Hides the element (display:none) in print (pre)view |
Helpers | |
.warning |
Adds a yellow background color to the table row (<tr> or table cell (<td>). Indicates a warning |
Try it | Tables |
.well |
Adds a rounded border around an element with a gray background color and some padding | Try it | Wells |
.well-lg |
Large well (more padding) | Try it | Wells |
.well-sm |
Small well (less padding) | Try it | Wells |
Bootstrap's global default font-size is 14px, with a line-height of 1.428.
This is applied to the <body> and all paragraphs.
In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).
The elements below are HTML elements that will be styled a little bit differently by Bootstrap than browser defaults. Look at the "Try it" examples to see the result/differences.
The classes below is used to style the elements further.
| Element/Class | Description | Example |
|---|---|---|
| <h1> - <h6> or .h1 - .h6 |
h1 - h6 headings | Try it |
| <small> | Creates a lighter, secondary text in any heading
Heading (secondary text) |
Try it |
| .small | Indicates smaller text (set to 85% of the size of the parent): Smaller text | Try it |
| .lead | Makes a text stand out: Stand out text | Try it |
| <mark> or .mark |
Highlights text: Highlighted text | Try it |
| <del> | Indicates deleted text: |
Try it |
| <s> | Indicates no longer relevant text: |
Try it |
| <ins> | Indicates inserted text: Inserted text | Try it |
| <u> | Indicates underlined text: Underlined text | Try it |
| <strong> | Indicates bold text: Bold text | Try it |
| <em> | Indicates italic text: Italic text | Try it |
| .text-left | Indicates left-aligned text | Try it |
| .text-center | Indicates center-aligned text | Try it |
| .text-right | Indicates right-aligned text | Try it |
| .text-justify | Indicates justified text | Try it |
| .text-nowrap | Indicates no wrap text | Try it |
| .text-lowercase | Indicates lowercased text: LOWERCASED TEXT | Try it |
| .text-uppercase | Indicates uppercased text: uppercased text | Try it |
| .text-capitalize | Indicates capitalized text: capitalized text | Try it |
| <abbr> | The <abbr> element indicates an abbreviation or acronym. Abbreviations with a title attribute have a dotted bottom border and a help cursor on hover, providing additional context on hover. | Try it |
| .initialism | Displays the text inside the <abbr> element in a slightly smaller font size | Try it |
| <address> | Presents contact information | Try it |
| <blockquote> | Indicates blocks of content from another source | Try it |
| .blockquote-reverse | Indicates a blockquote with right-aligned content | Try it |
| <ul> | Indicates an unordered list | Try it |
| <ol> | Indicates an ordered list | Try it |
| .list-unstyled | Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) | Try it |
| .list-inline | Places all list items on a single line | Try it |
| <dl> | Indicates a description list | Try it |
| .dl-horizontal | Lines up the terms and descriptions in the <dl> element side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side | Try it |
| Element/Class | Description | Example |
|---|---|---|
| <var> | Indicates variables: x = ab + y | Try it |
| <kbd> | Indicates input that is typically entered via the keyboard: CTRL + P | Try it |
| <pre> | Indicates multiple lines of code | Try it |
| <pre class="pre-scrollable"> | Indicates multiple lines of code with scrollbar | Try it |
| <samp> | Indicates sample output from a computer program: Sample output | Try it |
| <code> | Indicates inline snippets of code: span, div |
Try it |
The classes below can be used to style any <a>, <button>, or <input> element:
| Class | Description | Example |
|---|---|---|
| .btn | Adds basic styling to any button | Try it |
| .btn-default | Indicates a default/standard button | Try it |
| .btn-primary | Provides extra visual weight and identifies the primary action in a set of buttons | Try it |
| .btn-success | Indicates a successful or positive action | Try it |
| .btn-info | Contextual button for informational alert messages | Try it |
| .btn-warning | Indicates caution should be taken with this action | Try it |
| .btn-danger | Indicates a dangerous or potentially negative action | Try it |
| .btn-link | Makes a button look like a link (will still have button behavior) | Try it |
| .btn-lg | Makes a large button | Try it |
| .btn-sm | Makes a small button | Try it |
| .btn-xs | Makes an extra small button | Try it |
| .btn-block | Makes a block-level button (spans the full width of the parent element) | Try it |
| .active | Makes the button appear pressed | Try it |
| .disabled | Makes the button disabled | Try it |
| .navbar-btn | Vertically aligns a button inside a navbar | Try it |
The classes below can be used to style any <a>, <button>, or <input> element:
| Class | Description | Example |
|---|---|---|
| .btn-group | Groups buttons together on a single line | Try it |
| .btn-group-justified | Makes a group of buttons span the entire width of the screen | Try it |
| .btn-group-lg | Large button group (makes all buttons in a button group larger - increased font-size and padding) | Try it |
| .btn-group-sm | Small button group (makes all buttons in a button group smaller) | Try it |
| .btn-group-xs | Extra small button group (makes all buttons in a button group extra small) | Try it |
| .btn-group-vertical | Makes a button group appear vertically stacked | Try it |
Individual form controls automatically receive some global styling with Bootstrap.
All textual <input>, <textarea>, and <select> elements with class="form-control" are set to width: 100%; by default.
Standard rules for all three form layouts:
<div class="form-group"> (needed for optimum spacing).form-control to all textual <input>, <textarea>, and <select> elementsThe following example creates a simple Bootstrap form with two input fields, one checkbox, and a submit button:
| Class | Description | Example |
|---|---|---|
| .form-inline | Makes a <form> left-aligned with inline-block controls (This only applies to forms within viewports that are at least 768px wide) | Try it |
| .form-horizontal | Aligns labels and groups of form controls in a horizontal layout | Try it |
| .form-control | Used on input, textarea, and select elements to span the entire width of the page and make them responsive | Try it |
| .form-control-feedback | Form validation class | Try it |
| .form-control-static | Adds plain text next to a form label within a horizontal form | Try it |
| .form-group | Container for form input and label | Try it |
| Class | Description | Example |
|---|---|---|
| .input-group | Container to enhance an input by adding an icon, text or a button in front or behind it as a "help text" | Try it |
| .input-group-lg | Large input group | Try it |
| .input-group-sm | Small input group | Try it |
| .input-group-addon | Together with the .input-group class, this class makes it possible to add an icon or help text next to the input field | Try it |
| .input-group-btn | Together with the .input-group class, this class attaches a button next to an input. Often used as a search bar | Try it |
| .input-lg | Large input field | Try it |
| .input-sm | Small input field | Try it |
Add meaning through text-colors with the classes below. Links will darken on hover:
| Class | Description | Example |
|---|---|---|
| .text-muted | Text styled with class "text-muted" | Try it |
| .text-primary | Text styled with class "text-primary" | Try it |
| .text-success | Text styled with class "text-success" | Try it |
| .text-info | Text styled with class "text-info" | Try it |
| .text-warning | Text styled with class "text-warning" | Try it |
| .text-danger | Text styled with class "text-danger" | Try it |
Add meaning through background-colors with the classes below. Links will darken on hover just like text classes:
| Class | Description | Example |
|---|---|---|
| .bg-primary | Table cell is styled with class "bg-primary" | Try it |
| .bg-success | Table cell is styled with class "bg-success" | Try it |
| .bg-info | Table cell is styled with class "bg-info" | Try it |
| .bg-warning | Table cell is styled with class "bg-warning" | Try it |
| .bg-danger | Table cell is styled with class "bg-danger" | Try it |
| Class | Description | Example |
|---|---|---|
| .pull-left | Floats an element to the left | Try it |
| .pull-right | Floats an element to the right | Try it |
| .center-block | Sets an element to display:block with margin-right:auto and margin-left:auto | Try it |
| .clearfix | Clears floats | Try it |
| .show | Forces an element to be shown (display:block) | Try it |
| .hidden | Forces an element to be hidden (display:none) | Try it |
| .invisible | Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible | Try it |
| .sr-only | Hides an element to all devices except screen readers | Try it |
| .sr-only-focusable | Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) | Try it |
| .text-hide | Helps replace an element's text content with a background image | Try it |
| .close | Indicates a close icon | Try it |
| .caret | Indicates dropdown functionality (will reverse automatically in dropup menus) | Try it |
These classes are used to show and/or hide content by device via media queries.
Use one or a combination of the available classes for toggling content across viewport breakpoints:
| Classes | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
Hide elements depending on screen size:
Result:
Resize this page to see how the text below changes:
As of v3.2.0, the .visible-*-* classes for come in three variations, one for each CSS display
property value:
| Group of classes | CSS display |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
E.g. for small (sm) screens, the available .visible-*-* classes are: .visible-sm-block, .visible-sm-inline, and .visible-sm-inline-block.
The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg are deprecated as of v3.2.0.
Result:
Resize this page to see how the text below changes:
Rounded Corners:
Circle:
Thumbnail:
The classes below can be used to style any image:
| Class | Description | Example |
|---|---|---|
| .img-rounded | Adds rounded corners to an image (not available in IE8) | Try it |
| .img-circle | Shapes the image to a circle (not available in IE8) | Try it |
| .img-thumbnail | Shapes the image to a thumbnail | Try it |
| .img-responsive | Makes an image responsive (will scale nicely to the parent element) | Try it |
Create responsive images by adding an .img-responsive class
to the <img> tag. The image will then scale nicely to the parent element.
The .img-responsive class applies max-width: 100%, height: auto,
and display:block to the image:
Use the classes below to style any table:
| Class | Description | Example |
|---|---|---|
| .table | Adds basic styling (light padding and only horizontal dividers) to any <table> | Try it |
| .table-striped | Adds zebra-striping to any table row within <tbody> (not available in IE8) | Try it |
| .table-bordered | Adds border on all sides of the table and cells | Try it |
| .table-hover | Enables a hover state on table rows within a <tbody> | Try it |
| .table-condensed | Makes table more compact by cutting cell padding in half | Try it |
| Combining all the table classes | Try it | |
Use the classes below to color table rows or cells:
| Class | Description | Example |
|---|---|---|
| .active | Applies the hover color (light-grey) to a particular row or cell | Try it |
| .success | Indicates a successful or positive action | Try it |
| .info | Indicates a neutral informative change or action | Try it |
| .warning | Indicates a warning that might need attention | Try it |
| .danger | Indicates a dangerous or potentially negative action | Try it |
The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:
For a tutorial about Dropdowns, read our Bootstrap Dropdowns Tutorial.
| Class | Description | Example |
|---|---|---|
| .dropdown | Indicates a dropdown menu | Try it |
| .dropdown-menu | Builds the dropdown menu | Try it |
| .dropdown-menu-right | Right-aligns a dropdown menu | Try it |
| .dropdown-header | Adds a header inside the dropdown menu | Try it |
| .dropup | Indicates a dropup menu | Try it |
| .disabled | Disables an item in the dropdown menu | Try it |
| .divider | Separates items inside the dropdown menu with a horizontal line | Try it |
For a tutorial about collapsibles, read our Bootstrap Collapse Tutorial.
| Class | Description | Example |
|---|---|---|
| .collapse | Indicates collapsible content - which can be hidden or shown on demand | Try it |
| .collapse .in | Show the collapsible content by default | Try it |
| .panel-collapse | Collapsible panel (toggle between hiding and showing panel(s)) | Try it |
| Collapsible list group | Try it | |
| Accordion | Try it |
| Class | Description | Example |
|---|---|---|
| .nav nav-tabs | Creates navigation tabs | Try it |
| .nav nav-pills | Creates navigation pills | Try it |
| .nav nav-pills nav-stacked | Creates vertical navigation pills | Try it |
| .nav-justified | Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs/pills are stacked | Try it |
| .disabled | Indicates a disabled (unclickable) tab/pill | Try it |
| Navigation tabs with dropdown menu | Try it | |
| Navigation pills with dropdown menu | Try it | |
| .tab-content | Together with .tab-pane and data-toggle="tab" (data-toggle="pill" for pills), it makes the tab/pill toggleable | Try it |
| .tab-pane | Together with .tab-content and data-toggle="tab" (data-toggle="pill" for pills), it makes the tab/pill toggleable | Try it |
| Class | Description | Example |
|---|---|---|
| .navbar | Creates a navigation bar | Try it |
| .navbar-brand | Added to a link or a header element inside the navbar to represent a logo or a header | Try it |
| .navbar-btn | Vertically aligns a button inside a navbar | Try it |
| .navbar-collapse | Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets) | Try it |
| .navbar-default | Creates a default navigation bar (light-grey background color) | Try it |
| .navbar-fixed-bottom | Makes the navbar stay at the bottom of the screen (sticky/fixed) | Try it |
| .navbar-fixed-top | Makes the navbar stay at the top of the screen (sticky/fixed) | Try it |
| .navbar-form | Added to form elements inside the navbar to vertically center them (proper padding) | Try it |
| .navbar-header | Added to a container element that contains the link/element that represent a logo or a header | Try it |
| .navbar-inverse | Creates a black navigation bar (instead of light-grey) | Try it |
| .navbar-left | Aligns nav links, forms, buttons, or text, in the navbar to the left | Try it |
| .navbar-link | Styles an element to look like a link inside the navbar (anchors get proper padding and an underline on hover, while other elements like p or span gets a default hover effect - white color in an inversed navbar and a black color in a default navbar) | Try it |
| .navbar-nav | Used on a <ul> container that contains the list items with links inside a navigation bar | Try it |
| .navbar-right | Aligns nav links, forms, buttons, or text in the navbar to the right. | Try it |
| .navbar-static-top | Removes left, top and right borders (rounded corners) from the navbar (default navbar has a gray border and a 4px border-radius by default) | |
| .navbar-text | Vertical align any elements inside the navbar that are not links (ensures proper padding) | Try it |
| .navbar-toggle | Styles the button that should open the navbar on small screens. Often used together with three .icon-bar classes to indicate a toggleable menu icon (hamburger/bars) |
Try it |
| Class | Description | Example |
|---|---|---|
| .breadcrumb | Makes a breadcrumb | Try it |
| .pager | Provides simple pagination links (Previous/Next) | Try it |
| .previous | Aligns the .pager previous button to the left | Try it |
| .next | Aligns the .pager next button to the right | Try it |
| .disabled | Indicates an unclickable link | Try it |
| .pagination | Provides pagination links | Try it |
| .pagination-lg | Used together with the .pagination class to provide larger pagination links | Try it |
| .pagination-sm | Used together with the .pagination class to provide smaller pagination links | Try it |
| .disabled | Indicates an unclickable link | Try it |
| .active | Indicates the current page | Try it |
| Class | Description | Example |
|---|---|---|
| .label label-default | Indicates a default grey label | Try it |
| .label label-primary | Indicates a blue label of type "primary" | Try it |
| .label label-success | Indicates a green label of type "success" | Try it |
| .label label-info | Indicates a light blue label of type "info" | Try it |
| .label label-warning | Indicates a yellow label of type "warning" | Try it |
| .label label-danger | Indicates a red label of type "danger" | Try it |
| .badge | Indicates new or unread items | Try it |
| .jumbotron | Indicates a big box for calling extra attention to featured content or information | Try it |
| .jumbotron (extra) | To let the .jumbotron box span the full width, and without rounded corners, place it outside the .container class | Try it |
Bootstrap includes 260 glyphs from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back to Glyphicons whenever possible.
Use glyphicons in text, buttons, toolbars, navigation, or forms:
| Glyph | Description | Example |
|---|---|---|
| glyphicon glyphicon-asterisk | Try it | |
| glyphicon glyphicon-plus | Try it | |
| glyphicon glyphicon-minus | Try it | |
| glyphicon glyphicon-euro | Try it | |
| glyphicon glyphicon-cloud | Try it | |
| glyphicon glyphicon-envelope | Try it | |
| glyphicon glyphicon-pencil | Try it | |
| glyphicon glyphicon-glass | Try it | |
| glyphicon glyphicon-music | Try it | |
| glyphicon glyphicon-search | Try it | |
| glyphicon glyphicon-heart | Try it | |
| glyphicon glyphicon-star | Try it | |
| glyphicon glyphicon-star-empty | Try it | |
| glyphicon glyphicon-user | Try it | |
| glyphicon glyphicon-film | Try it | |
| glyphicon glyphicon-th-large | Try it | |
| glyphicon glyphicon-th | Try it | |
| glyphicon glyphicon-th-list | Try it | |
| glyphicon glyphicon-ok | Try it | |
| glyphicon glyphicon-remove | Try it | |
| glyphicon glyphicon-zoom-in | Try it | |
| glyphicon glyphicon-zoom-out | Try it | |
| glyphicon glyphicon-off | Try it | |
| glyphicon glyphicon-signal | Try it | |
| glyphicon glyphicon-cog | Try it | |
| glyphicon glyphicon-trash | Try it | |
| glyphicon glyphicon-home | Try it | |
| glyphicon glyphicon-file | Try it | |
| glyphicon glyphicon-time | Try it | |
| glyphicon glyphicon-road | Try it | |
| glyphicon glyphicon-download-alt | Try it | |
| glyphicon glyphicon-download | Try it | |
| glyphicon glyphicon-upload | Try it | |
| glyphicon glyphicon-inbox | Try it | |
| glyphicon glyphicon-play-circle | Try it | |
| glyphicon glyphicon-repeat | Try it | |
| glyphicon glyphicon-refresh | Try it | |
| glyphicon glyphicon-list-alt | Try it | |
| glyphicon glyphicon-lock | Try it | |
| glyphicon glyphicon-flag | Try it | |
| glyphicon glyphicon-headphones | Try it | |
| glyphicon glyphicon-volume-off | Try it | |
| glyphicon glyphicon-volume-down | Try it | |
| glyphicon glyphicon-volume-up | Try it | |
| glyphicon glyphicon-qrcode | Try it | |
| glyphicon glyphicon-barcode | Try it | |
| glyphicon glyphicon-tag | Try it | |
| glyphicon glyphicon-tags | Try it | |
| glyphicon glyphicon-book | Try it | |
| glyphicon glyphicon-bookmark | Try it | |
| glyphicon glyphicon-print | Try it | |
| glyphicon glyphicon-camera | Try it | |
| glyphicon glyphicon-font | Try it | |
| glyphicon glyphicon-bold | Try it | |
| glyphicon glyphicon-italic | Try it | |
| glyphicon glyphicon-text-height | Try it | |
| glyphicon glyphicon-text-width | Try it | |
| glyphicon glyphicon-align-left | Try it | |
| glyphicon glyphicon-align-center | Try it | |
| glyphicon glyphicon-align-right | Try it | |
| glyphicon glyphicon-align-justify | Try it | |
| glyphicon glyphicon-list | Try it | |
| glyphicon glyphicon-indent-left | Try it | |
| glyphicon glyphicon-indent-right | Try it | |
| glyphicon glyphicon-facetime-video | Try it | |
| glyphicon glyphicon-picture | Try it | |
| glyphicon glyphicon-map-marker | Try it | |
| glyphicon glyphicon-adjust | Try it | |
| glyphicon glyphicon-tint | Try it | |
| glyphicon glyphicon-edit | Try it | |
| glyphicon glyphicon-share | Try it | |
| glyphicon glyphicon-check | Try it | |
| glyphicon glyphicon-move | Try it | |
| glyphicon glyphicon-step-backward | Try it | |
| glyphicon glyphicon-fast-backward | Try it | |
| glyphicon glyphicon-backward | Try it | |
| glyphicon glyphicon-play | Try it | |
| glyphicon glyphicon-pause | Try it | |
| glyphicon glyphicon-stop | Try it | |
| glyphicon glyphicon-forward | Try it | |
| glyphicon glyphicon-fast-forward | Try it | |
| glyphicon glyphicon-step-forward | Try it | |
| glyphicon glyphicon-eject | Try it | |
| glyphicon glyphicon-chevron-left | Try it | |
| glyphicon glyphicon-chevron-right | Try it | |
| glyphicon glyphicon-plus-sign | Try it | |
| glyphicon glyphicon-minus-sign | Try it | |
| glyphicon glyphicon-remove-sign | Try it | |
| glyphicon glyphicon-ok-sign | Try it | |
| glyphicon glyphicon-question-sign | Try it | |
| glyphicon glyphicon-info-sign | Try it | |
| glyphicon glyphicon-screenshot | Try it | |
| glyphicon glyphicon-remove-circle | Try it | |
| glyphicon glyphicon-ok-circle | Try it | |
| glyphicon glyphicon-ban-circle | Try it | |
| glyphicon glyphicon-arrow-left | Try it | |
| glyphicon glyphicon-arrow-right | Try it | |
| glyphicon glyphicon-arrow-up | Try it | |
| glyphicon glyphicon-arrow-down | Try it | |
| glyphicon glyphicon-share-alt | Try it | |
| glyphicon glyphicon-resize-full | Try it | |
| glyphicon glyphicon-resize-small | Try it | |
| glyphicon glyphicon-exclamation-sign | Try it | |
| glyphicon glyphicon-gift | Try it | |
| glyphicon glyphicon-leaf | Try it | |
| glyphicon glyphicon-fire | Try it | |
| glyphicon glyphicon-eye-open | Try it | |
| glyphicon glyphicon-eye-close | Try it | |
| glyphicon glyphicon-warning-sign | Try it | |
| glyphicon glyphicon-plane | Try it | |
| glyphicon glyphicon-calendar | Try it | |
| glyphicon glyphicon-random | Try it | |
| glyphicon glyphicon-comment | Try it | |
| glyphicon glyphicon-magnet | Try it | |
| glyphicon glyphicon-chevron-up | Try it | |
| glyphicon glyphicon-chevron-down | Try it | |
| glyphicon glyphicon-retweet | Try it | |
| glyphicon glyphicon-shopping-cart | Try it | |
| glyphicon glyphicon-folder-close | Try it | |
| glyphicon glyphicon-folder-open | Try it | |
| glyphicon glyphicon-resize-vertical | Try it | |
| glyphicon glyphicon-resize-horizontal | Try it | |
| glyphicon glyphicon-hdd | Try it | |
| glyphicon glyphicon-bullhorn | Try it | |
| glyphicon glyphicon-bell | Try it | |
| glyphicon glyphicon-certificate | Try it | |
| glyphicon glyphicon-thumbs-up | Try it | |
| glyphicon glyphicon-thumbs-down | Try it | |
| glyphicon glyphicon-hand-right | Try it | |
| glyphicon glyphicon-hand-left | Try it | |
| glyphicon glyphicon-hand-up | Try it | |
| glyphicon glyphicon-hand-down | Try it | |
| glyphicon glyphicon-circle-arrow-right | Try it | |
| glyphicon glyphicon-circle-arrow-left | Try it | |
| glyphicon glyphicon-circle-arrow-up | Try it | |
| glyphicon glyphicon-circle-arrow-down | Try it | |
| glyphicon glyphicon-globe | Try it | |
| glyphicon glyphicon-wrench | Try it | |
| glyphicon glyphicon-tasks | Try it | |
| glyphicon glyphicon-filter | Try it | |
| glyphicon glyphicon-briefcase | Try it | |
| glyphicon glyphicon-fullscreen | Try it | |
| glyphicon glyphicon-dashboard | Try it | |
| glyphicon glyphicon-paperclip | Try it | |
| glyphicon glyphicon-heart-empty | Try it | |
| glyphicon glyphicon-link | Try it | |
| glyphicon glyphicon-phone | Try it | |
| glyphicon glyphicon-pushpin | Try it | |
| glyphicon glyphicon-usd | Try it | |
| glyphicon glyphicon-gbp | Try it | |
| glyphicon glyphicon-sort | Try it | |
| glyphicon glyphicon-sort-by-alphabet | Try it | |
| glyphicon glyphicon-sort-by-alphabet-alt | Try it | |
| glyphicon glyphicon-sort-by-order | Try it | |
| glyphicon glyphicon-sort-by-order-alt | Try it | |
| glyphicon glyphicon-sort-by-attributes | Try it | |
| glyphicon glyphicon-sort-by-attributes-alt | Try it | |
| glyphicon glyphicon-unchecked | Try it | |
| glyphicon glyphicon-expand | Try it | |
| glyphicon glyphicon-collapse-down | Try it | |
| glyphicon glyphicon-collapse-up | Try it | |
| glyphicon glyphicon-log-in | Try it | |
| glyphicon glyphicon-flash | Try it | |
| glyphicon glyphicon-log-out | Try it | |
| glyphicon glyphicon-new-window | Try it | |
| glyphicon glyphicon-record | Try it | |
| glyphicon glyphicon-save | Try it | |
| glyphicon glyphicon-open | Try it | |
| glyphicon glyphicon-saved | Try it | |
| glyphicon glyphicon-import | Try it | |
| glyphicon glyphicon-export | Try it | |
| glyphicon glyphicon-send | Try it | |
| glyphicon glyphicon-floppy-disk | Try it | |
| glyphicon glyphicon-floppy-saved | Try it | |
| glyphicon glyphicon-floppy-remove | Try it | |
| glyphicon glyphicon-floppy-save | Try it | |
| glyphicon glyphicon-floppy-open | Try it | |
| glyphicon glyphicon-credit-card | Try it | |
| glyphicon glyphicon-transfer | Try it | |
| glyphicon glyphicon-cutlery | Try it | |
| glyphicon glyphicon-header | Try it | |
| glyphicon glyphicon-compressed | Try it | |
| glyphicon glyphicon-earphone | Try it | |
| glyphicon glyphicon-phone-alt | Try it | |
| glyphicon glyphicon-tower | Try it | |
| glyphicon glyphicon-stats | Try it | |
| glyphicon glyphicon-sd-video | Try it | |
| glyphicon glyphicon-hd-video | Try it | |
| glyphicon glyphicon-subtitles | Try it | |
| glyphicon glyphicon-sound-stereo | Try it | |
| glyphicon glyphicon-sound-dolby | Try it | |
| glyphicon glyphicon-sound-5-1 | Try it | |
| glyphicon glyphicon-sound-6-1 | Try it | |
| glyphicon glyphicon-sound-7-1 | Try it | |
| glyphicon glyphicon-copyright-mark | Try it | |
| glyphicon glyphicon-registration-mark | Try it | |
| glyphicon glyphicon-cloud-download | Try it | |
| glyphicon glyphicon-cloud-upload | Try it | |
| glyphicon glyphicon-tree-conifer | Try it | |
| glyphicon glyphicon-tree-deciduous | Try it | |
| glyphicon glyphicon-cd | Try it | |
| glyphicon glyphicon-save-file | Try it | |
| glyphicon glyphicon-open-file | Try it | |
| glyphicon glyphicon-level-up | Try it | |
| glyphicon glyphicon-copy | Try it | |
| glyphicon glyphicon-paste | Try it | |
| glyphicon glyphicon-alert | Try it | |
| glyphicon glyphicon-equalizer | Try it | |
| glyphicon glyphicon-king | Try it | |
| glyphicon glyphicon-queen | Try it | |
| glyphicon glyphicon-pawn | Try it | |
| glyphicon glyphicon-bishop | Try it | |
| glyphicon glyphicon-knight | Try it | |
| glyphicon glyphicon-baby-formula | Try it | |
| glyphicon glyphicon-tent | Try it | |
| glyphicon glyphicon-blackboard | Try it | |
| glyphicon glyphicon-bed | Try it | |
| glyphicon glyphicon-apple | Try it | |
| glyphicon glyphicon-erase | Try it | |
| glyphicon glyphicon-hourglass | Try it | |
| glyphicon glyphicon-lamp | Try it | |
| glyphicon glyphicon-duplicate | Try it | |
| glyphicon glyphicon-piggy-bank | Try it | |
| glyphicon glyphicon-scissors | Try it | |
| glyphicon glyphicon-bitcoin | Try it | |
| glyphicon glyphicon-yen | Try it | |
| glyphicon glyphicon-ruble | Try it | |
| glyphicon glyphicon-scale | Try it | |
| glyphicon glyphicon-ice-lolly | Try it | |
| glyphicon glyphicon-ice-lolly-tasted | Try it | |
| glyphicon glyphicon-education | Try it | |
| glyphicon glyphicon-option-horizontal | Try it | |
| glyphicon glyphicon-option-vertical | Try it | |
| glyphicon glyphicon-menu-hamburger | Try it | |
| glyphicon glyphicon-modal-window | Try it | |
| glyphicon glyphicon-oil | Try it | |
| glyphicon glyphicon-grain | Try it | |
| glyphicon glyphicon-sunglasses | Try it | |
| glyphicon glyphicon-text-size | Try it | |
| glyphicon glyphicon-text-color | Try it | |
| glyphicon glyphicon-text-background | Try it | |
| glyphicon glyphicon-object-align-top | Try it | |
| glyphicon glyphicon-object-align-bottom | Try it | |
| glyphicon glyphicon-object-align-horizontal | Try it | |
| glyphicon glyphicon-object-align-left | Try it | |
| glyphicon glyphicon-object-align-vertical | Try it | |
| glyphicon glyphicon-object-align-right | Try it | |
| glyphicon glyphicon-triangle-right | Try it | |
| glyphicon glyphicon-triangle-left | Try it | |
| glyphicon glyphicon-triangle-bottom | Try it | |
| glyphicon glyphicon-triangle-top | Try it | |
| glyphicon glyphicon-superscript | Try it | |
| glyphicon glyphicon-subscript | Try it | |
| glyphicon glyphicon-menu-left | Try it | |
| glyphicon glyphicon-menu-right | Try it | |
| glyphicon glyphicon-menu-down | Try it | |
| glyphicon glyphicon-menu-up | Try it |
The Affix plugin allows an element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them "stick" at a specific area while scrolling up and down the page.
The plugin toggles this behavior on and off (changes the value of CSS position from static to fixed), depending on scroll position.
The affix plugin toggles between three classes: .affix, .affix-top, and
.affix-bottom. Each class represents a particular state. You must add CSS
properties to handle the actual positions, with the exception of position:fixed
on the .affix class.
For more information, read our Bootstrap Affix Tutorial.
Tip: The Affix plugin is often used together with the Scrollspy plugin.
Add data-spy="affix" to the element you want to spy on,
and the data-offset-top|bottom="number"
attribute to calculate the position of the scroll.
Enable manually with:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
The following table lists all available affix events.
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
Try it |
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
Try it |
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) |
Try it |
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) |
Try it |
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) |
Try it |
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) |
Try it |
Create a horizontal affixed navigation menu:
Use jQuery's outerHeight() method to affix the navbar after the user has scrolled passed a specified element (<header>):
Using the Affix plugin together with the Scrollspy plugin:
Use CSS to manipulate the different .affix classes:
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff !important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
}
Try it Yourself »
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}
Try it Yourself »
The alert plugin include options and methods to close alert messages.
For a tutorial about Alerts, read our Bootstrap Alerts Tutorial.
| Class | Description | Example |
|---|---|---|
| .alert | Creates an alert message box | Try it |
| .alert-danger | Red alert. Indicates a dangerous or potentially negative action | Try it |
| .alert-dismissible | Indicates a closable alert box. Together with the .close class, this class is used to close the alert (adds extra padding) |
Try it |
| .alert-info | Light-blue alert.Indicates a neutral informative change or action | Try it |
| .alert-link | Used on links inside alerts to provide matching colored links | Try it |
| .alert-success | Green alert. Indicates a successful or positive action | Try it |
| .alert-warning | Yellow alert. Indicates caution should be taken with this action | Try it |
| .close | Styles the close button for the alert message (floats right with a specified font-size, color, etc.) | Try it |
Add data-dismiss="alert" to a link or a button element to close the
alert message.
Close manually with:
| None |
The following table lists all available alert methods.
| Method | Description | Try it |
|---|---|---|
| .alert("close") | Closes the alert message | Try it |
The following table lists all available alert events.
| Event | Description | Try it |
|---|---|---|
| close.bs.alert | Occurs when the alert message is about to be closed | Try it |
| closed.bs.alert | Occurs when the alert message has been closed | Try it |
Use this plugin if you want to have more control over your buttons.
For a tutorial about Buttons, read our Bootstrap Buttons Tutorial.
The classes below can be used to style any <a>, <button>, or <input> element:
| Class | Description | Example |
|---|---|---|
| .btn | Adds basic styling to any button | Try it |
| .btn-default | Indicates a default/standard button | Try it |
| .btn-primary | Provides extra visual weight and identifies the primary action in a set of buttons | Try it |
| .btn-success | Indicates a successful or positive action | Try it |
| .btn-info | Contextual button for informational alert messages | Try it |
| .btn-warning | Indicates caution should be taken with this action | Try it |
| .btn-danger | Indicates a dangerous or potentially negative action | Try it |
| .btn-link | Makes a button look like a link (will still have button behavior) | Try it |
| .btn-lg | Makes a large button | Try it |
| .btn-sm | Makes a small button | Try it |
| .btn-xs | Makes an extra small button | Try it |
| .btn-block | Makes a block-level button (spans the full width of the parent element) | Try it |
| .active | Makes the button appear pressed | Try it |
| .disabled | Makes the button disabled | Try it |
Enable manually with:
$('.btn').button();
| None |
The following table lists all available button methods.
Note: For this plugin, methods can also be passed via data attributes; append the method name to data-, as in data-toggle or data-loading.
| Method | Description | Try it |
|---|---|---|
| .button("toggle") | Makes the button look pressed | Try it |
| .button("loading") | Disables the button and changes the button text to "loading..." | Try it |
| .button("reset") | Changes the button text to original text (if changed) | Try it |
| .button("string") | Specifies a new button text | Try it |
How to remove the rounded borders:
How to add a specific color:
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
}
Try it Yourself »
How to add shadows:
The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).
For a tutorial about Carousels, read our Bootstrap Carousel Tutorial.
Note: Carousels are not supported properly in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve the slide effect).
| Class | Description |
|---|---|
| .carousel | Creates a carousel |
| .slide | Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect |
| .carousel-indicators | Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) |
| .carousel-inner | Adds slides to the carousel |
| .icon-next | Unicode icon (arrow pointing right), used in carousels. This is often used instead of a glyphicon |
| .icon-prev | Unicode icon (arrow pointing left), used in carousels. This is often used instead of a glyphicon |
| .item | Specifies the content of each slide |
| .left carousel-control | Adds a left button to the carousel, which allows the user to go back between the slides |
| .right carousel-control | Adds a right button to the carousel, which allows the user to go forward between the slides |
| .carousel-caption | Specifies a caption for the carousel |
The data-ride="carousel" attribute activates the carousel.
The data-slide and data-slide-to attributes specifies which slide to go to.
The data-slide attribute accepts two values: prev or
next, while
data-slide-to accept numbers.
Enable manually with:
// Activate Carousel
$("#myCarousel").carousel();
// Enable Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Try it Yourself »
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 |
Specifies the delay (in milliseconds) between each slide. Note: Set interval to false to stop the items from automatically sliding |
Using JS Using data |
| pause | string, or the boolean false | "hover" | Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel Note: Set pause to false to stop the ability to pause on hover |
Using JS Using data |
| wrap | boolean | true | Specifies whether the carousel should go through all slides continuously, or stop at the last slide
|
Using JS Using data |
The following table lists all available carousel methods.
| Method | Description | Try it |
|---|---|---|
| .carousel(options) | Activates the carousel with an option. See options above for valid values | Try it |
| .carousel("cycle") | Goes through the carousel items from left to right | Try it |
| .carousel("pause") | Stops the carousel from going through items | Try it |
| .carousel(number) | Goes to a specified item (zero-based: first item is 0, second item is 1, etc..) | Try it |
| .carousel("prev") | Goes to the previous item | Try it |
| .carousel("next") | Goes to the next item | Try it |
The following table lists all available carousel events.
| Event | Description | Try it |
|---|---|---|
| slide.bs.carousel | Occurs when the carousel is about to slide from one item to another | Try it |
| slid.bs.carousel | Occurs when the carousel has finished sliding from one item to another | Try it |
Add <div class="carousel-caption"> within each <div
class="item"> to create a caption for each slide:
Get base styles and flexible support for collapsible components like accordions and navigation.
Plugin dependency: Collapse requires the transitions plugin to be included in your version of Bootstrap.
For a tutorial about Collapsibles, read our Bootstrap Collapse Tutorial.
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | Try it |
| .collapse in | Shows the content | Try it |
| .collapsing | Added when the transition starts, and removed when it finishes | Try it |
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
Tip: To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector".
Enable manually with:
$('.collapse').collapse()
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| toggle | boolean | true | Toggles the collapsible element on invocation |
The following table lists all available collapse methods.
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | Try it |
| .collapse("show") | Shows the collapsible element | Try it |
| .collapse("hide") | Hides the collapsible element | Try it |
The following table lists all available collapse events.
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | Try it |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | Try it |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) | Try it |
The following example makes a button toggle the expanding and collapsing content of another element:
The following example shows a collapsible panel:
The following shows a collapsible panel with a list group inside:
The following example shows a simple accordion by extending the panel component:
Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.
The following example changes the open/close text and icon when opening and closing the collapsible content:
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
Try it Yourself »
Or you can use CSS:
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
content: "\e080";
}
Try it Yourself »
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.
For a tutorial about Dropdowns, read our Bootstrap Dropdowns Tutorial.
| Class | Description | Example |
|---|---|---|
| .dropdown | Indicates a dropdown menu | Try it |
| .dropdown-menu | Builds the dropdown menu | Try it |
| .dropdown-menu-right | Right-aligns a dropdown menu | Try it |
| .dropdown-header | Adds a header inside the dropdown menu | Try it |
| .dropup | Indicates a dropup menu | Try it |
| .disabled | Disables an item in the dropdown menu | Try it |
| .divider | Separates items inside the dropdown menu with a horizontal line | Try it |
Add data-toggle="dropdown" to a link or a button to toggle a dropdown menu.
Enable manually with:
Note: The data-toggle="dropdown" attribute is required regardless of whether you call the dropdown() method.
| None |
The following table lists all available dropdown methods.
| Method | Description | Try it |
|---|---|---|
| .dropdown("toggle") | Toggles the dropdown | Try it |
The following table lists all available dropdown events.
| Event | Description | Try it |
|---|---|---|
| show.bs.dropdown | Occurs when the dropdown is about to be shown. | Try it |
| shown.bs.dropdown | Occurs when the dropdown is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.dropdown | Occurs when the dropdown is about to be hidden | Try it |
| hidden.bs.dropdown | Occurs when the dropdown is fully hidden (after CSS transitions have completed) | Try it |
Tip: Use jQuery's event.relatedTarget to get the element which triggered the dropdown:
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});
Try it Yourself »
The following example changes the caret icon from pointing downwards to upwards when clicking on the dropdown:
/* CSS: */
<style>
.caret.caret-up {
border-top-width: 0;
border-bottom: 4px solid #fff;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$(".dropdown").on("hide.bs.dropdown", function(){
$(".btn").html('Dropdown <span class="caret"></span>');
});
$(".dropdown").on("show.bs.dropdown", function(){
$(".btn").html('Dropdown <span class="caret caret-up"></span>');
});
});
</script>
Try it Yourself »
The following example adds a dropdown menu for a button in the navigation bar:
The following example adds a dropdown menu with a login form in the navbar:
In this example, we use jQuery to open multi-level dropdowns on click:
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
Try it Yourself »
In this example, we have created a custom .dropdown-submenu class for multi-level dropdowns:
/* CSS: */
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
Try it Yourself »
The Modal plugin is a dialog box/popup window that is displayed on top of the current page.
For a tutorial about Modals, read our Bootstrap Modal Tutorial.
| Class | Description |
|---|---|
| .modal | Creates a modal |
| .modal-content | Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer. |
| .modal-header | Defines the style for the header of the modal |
| .modal-body | Defines the style for the body of the modal |
| .modal-footer | Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, overwrite CSS with text-align:left|center |
| .modal-sm | Specifies a small modal |
| .modal-lg | Specifies a large modal |
| .fade | Adds an animation/transition effect which fades the modal in and out |
Add data-toggle="modal" and data-target="#modalID" to
any element.
Note: For <a> elements, omit data-target, and use
href="#modalID" instead:
Enable manually with:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true |
Specifies whether the modal should have a dark overlay:
If you specify the value "static", it is not possible to close the modal when clicking outside of it |
Using JS Using data |
| keyboard | boolean | true | Specifies whether the modal can be closed with the escape key (Esc):
|
Using JS Using data |
| show | boolean | true | Specifies whether to show the modal when initialized | Using JS Using data |
The following table lists all available modal methods.
| Method | Description | Try it |
|---|---|---|
| .modal(options) | Activates the content as a modal. See options above for valid values | Try it |
| .modal("toggle") | Toggles the modal | Try it |
| .modal("show") | Opens the modal | Try it |
| .modal("hide") | Hides the modal | Try it |
The following table lists all available modal events.
| Event | Description | Try it |
|---|---|---|
| show.bs.modal | Occurs when the modal is about to be shown | Try it |
| shown.bs.modal | Occurs when the modal is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.modal | Occurs when the modal is about to be hidden | Try it |
| hidden.bs.modal | Occurs when the modal is fully hidden (after CSS transitions have completed) | Try it |
The following example creates a modal for login:
The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.
Plugin dependency: Popovers require the tooltip plugin (tooltip.js) to be included in your version of Bootstrap.
For a tutorial about Popovers, read our Bootstrap Popover Tutorial.
The data-toggle="popover" activates the popover.
The title attribute specifies the header text of the popover.
The data-content attribute specifies the text that should be displayed inside
the popover's body.
Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the
popover() method.
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
Try it Yourself »
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-placement="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when opening and closing the popover
|
Try it |
| container | string, or the boolean false | false | Appends the popover to a specific element. Example: container: 'body' |
Try it |
| content | string | "" | Specifies the text inside the popover's body | Try it |
| delay | number, or object | 0 | Specifies the number of milliseconds it will take to open and close the popover. To specify a delay for opening and another one for closing, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to open the popover, but only 100 ms to close it |
Try it |
| html | boolean | false | Specifies whether to accept HTML tags in the popover:
When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks |
Try it |
| placement | string | "right" | Specifies the popover position. Possible values:
|
Try it |
| selector | string, or the boolean false | false | Adds the popover to a specified selector | Try it |
| template | string | Base HTML to use when creating the popover. The popover's title will be injected into the .popover-title. The popover's content will be injected into the .popover-content. .arrow will become the popover's arrow. The outermost wrapper element should have the .popover class. |
||
| title | string | "" | Specifies the header text of the popover | Try it |
| trigger | string | "click" | Specifies how the popover is triggered. Possible values:
|
Try it |
| viewport | string, or object | {selector: "body", padding: 0} | Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or {selector: '#viewport', padding: 0} |
The following table lists all available popover methods.
| Method | Description | Try it |
|---|---|---|
| .popover(options) | Activates the popover with an option. See options above for valid values | Try it |
| .popover("show") | Shows the popover | Try it |
| .popover("hide") | Hides the popover | Try it |
| .popover("toggle") | Toggles the popover | Try it |
| .popover("destroy") | Hides and destroys the popover | Try it |
The following table lists all available popover events.
| Event | Description | Try it |
|---|---|---|
| show.bs.popover | Occurs when the popover is about to be shown | Try it |
| shown.bs.popover | Occurs when the popover is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.popover | Occurs when the popover is about to be hidden | Try it |
| hidden.bs.popover | Occurs when the popover is fully hidden (after CSS transitions have completed) | Try it |
Use CSS to customize the look of the popover:
/* Popover */
.popover {
border: 2px dotted red;
}
/* Popover Header */
.popover-title {
background-color: #73AD21;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}
/* Popover Body */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}
/* Popover Arrow */
.arrow {
border-right-color: red !important;
}
Try it Yourself »
The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.
For a tutorial about Scrollspy, read our Bootstrap Scrollspy Tutorial.
Tip: The Scrollspy plugin is often used together with the Affix plugin.
Add data-spy="scroll" to the element that should be used as the scrollable
area (often this is the <body> element).
Then add the data-target attribute with a value of the id or the class name
of the navigation bar (.navbar). This is to make sure that the navbar
is connected with the scrollable area.
Note that scrollable elements must match the ID of the links inside the navbar's
list items
(<div id="section1"> matches <a href="#section1">).
The optional data-offset attribute specifies the number of pixels to offset
from top when calculating the position of scroll. This is useful when you feel
that the links inside the navbar changes the active state too soon or too early
when jumping to the scrollable elements. Default is 10 pixels.
Requires relative positioning: The element with data-spy="scroll" requires the CSS position property, with a value of "relative" to work properly.
Enable manually with:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll | Try it |
The following table lists all available scrollspy methods.
| Method | Description | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document | Try it |
The following table lists all available scrollspy events.
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy | Try it |
How to add a smooth page scroll to an anchor on the same page:
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
Try it Yourself »
Using the Affix plugin together with the Scrollspy plugin:
Tabs are used to separate content into different panes where each pane is viewable one at a time.
For a tutorial about Tabs, read our Bootstrap Tabs/Pills Tutorial.
| Class | Description | Example |
|---|---|---|
| .nav nav-tabs | Creates navigation tabs | Try it |
| .nav-justified | Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs are stacked | Try it |
| .tab-content | Together with .tab-pane and data-toggle="tab", it makes the tab toggleable | Try it |
| .tab-pane | Together with .tab-content and data-toggle="tab", it makes the tab toggleable | Try it |
Add data-toggle="tab" to each tab, and add a .tab-pane class with a unique ID
for every tab and wrap them in a .tab-content class.
Enable manually with:
// Select all tabs
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')
// Select first tab
$('.nav-tabs a:first').tab('show')
// Select
last tab
$('.nav-tabs a:last').tab('show')
// Select fourth tab
(zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
Try it Yourself »
| None |
The following table lists all available tab methods.
| Method | Description | Try it |
|---|---|---|
| .tab("show") | Shows the tab | Try it |
The following table lists all available tab events.
| Event | Description | Try it |
|---|---|---|
| show.bs.tab | Occurs when the tab is about to be shown. | Try it |
| shown.bs.tab | Occurs when the tab is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.tab | Occurs when the tab is about to be hidden | Try it |
| hidden.bs.tab | Occurs when the tab is fully hidden (after CSS transitions have completed) | Try it |
Tip: Use jQuery's event.target and event.relatedTarget to get the active tab and the previous active tab:
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
});
Try it Yourself »
The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element.
For a tutorial about Tooltips, read our Bootstrap Tooltip Tutorial.
The data-toggle="tooltip" activates the tooltip.
The title attribute specifies the text that should be displayed
inside the tooltip.
Tooltips are not CSS-only plugins, and must therefore be initialized with
jQuery: select the specified element and call the tooltip() method.
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
Try it Yourself »
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-placement="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when showing and hiding the tooltip
|
Try it |
| container | string, or the boolean false | false | Appends the tooltip to a specific element. Example: container: 'body' |
Try it |
| delay | number, or object | 0 | Specifies the number of milliseconds it will take to show and hide the tooltip. To specify a delay for showing and another one for hiding, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to show the tooltip, but only 100 ms to hide it |
Try it |
| html | boolean | false | Specifies whether to accept HTML tags in the tooltip:
When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks |
Try it |
| placement | string | "top" | Specifies the tooltip position. Possible values:
|
Try it |
| selector | string, or the boolean false | false | Adds the tooltip to a specified selector | Try it |
| template | string | Base HTML to use when creating the tooltip. The tooltip's title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip's arrow. The outermost wrapper element should have the .tooltip class. |
||
| title | string | "" | Specifies the text that should be displayed inside the tooltip | Try it |
| trigger | string | "hover focus" | Specifies how the tooltip is triggered. Possible values:
|
Try it |
| viewport | string, or object | {selector: "body", padding: 0} | Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or {selector: '#viewport', padding: 0} |
The following table lists all available tooltip methods.
| Method | Description | Try it |
|---|---|---|
| .tooltip(options) | Activates the tooltip with an option. See options above for valid values | Try it |
| .tooltip("show") | Shows the tooltip | Try it |
| .tooltip("hide") | Hides the tooltip | Try it |
| .tooltip("toggle") | Toggles the tooltip | Try it |
| .tooltip("destroy") | Hides and destroys the tooltip | Try it |
The following table lists all available tooltip events.
| Event | Description | Try it |
|---|---|---|
| show.bs.tooltip | Occurs when the tooltip is about to be shown | Try it |
| shown.bs.tooltip | Occurs when the tooltip is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.tooltip | Occurs when the tooltip is about to be hidden | Try it |
| hidden.bs.tooltip | Occurs when the tooltip is fully hidden (after CSS transitions have completed) | Try it |
Use CSS to customize the look of the tooltip:
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color: #73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
border-right: 5px solid black;
}
Try it Yourself »